uniapp实战项目 （仿知识星球App) - - 实现图片懒加载

实战项目名称：仿知识星球App
技术栈：前端 => uni-app （ 后端：Node.js + Mysql + Apollo + Graphql ）
已实现功能：微信登录，创建星球，内容管理，星球管理
项目git地址：请点击访问

项目最终效果图：@点击访问效果图，欢迎关注收藏订阅专栏！！！

• 文章会先按照 ① uni-app端 、 ② Node.js后端 、③ 微信小程序、④ 利用宝塔面板部署项目；先后顺序更新文章。

---

提示：该项目只用于个人实战，不应用于任何商业用途。

一、今日实战目标

• 实现图片懒加载
• 封装首页列表组件

---

二、实战步骤

1. 导入懒加载插件

git项目地址更新后，插件也在里面

2.引入插件

<script>
	import lazyLoad from '@/uni_modules/muqian-lazyLoad/components/muqian-lazyLoad/muqian-lazyLoad.vue'
	export default {
		name: "index-card",
		props: {
			data: Object
		},
		components: {
			lazyLoad
		},
		data() {
			return {
				imgurl:'https://center.foshanlepin.com/upload/group/'
			};
		},
		methods:{
		}
	}
</script>
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3. 封装列表组件

• ① 将复用的组件封装成组件
  

//组件代码






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

• ② 在首页中使用

// 先引用插件
import Card from '@/components/index-card/index-card.vue'

// 请求后台api，遍历list数组
<view class="grid">
		<view class="" v-for="(item,index) in list" :key="index">
				<view class="" @click="details(item)">
					<Card :data="item" />
				</view>
		</view>
</view>
1
2
3
4
5
6
7
8
9
10
11

做完这几步，接通api后就可以实现图片列表懒加载

---

总结

由于项目目前在对接后台api中，项目git地址：请点击访问，大家可以去clone下来借鉴下；

• 温馨提示：

1. 项目仅用于个人实战，设计图和架构是自己基于知识星球APP进行设计的，算得上是入门级的uni-app，后期会更新一个企业级uniapp项目。
2. 我是在空闲中写写博客，并没有很规范，欢迎在评论区留下你的建议与意见。
3. git项目拷贝下来的代码有不懂的，可以截图私信给我，看到会回复你，希望可以帮助到你了解和开发uniapp。