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>
	

3. 封装列表组件

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

//组件代码
<template>
	<view class="index-card">
		<view>
			<lazyLoad :src="imgurl+data.logo" class="flex poster" height="156px" borderRadius="8px 8px 0 0" mode="scaleToFill"></lazyLoad>
			<view class="card-bottom space-between" v-if="data.userinfo">
				<view class="left col full">
					<text class="title text-overflow text-overflow1">{{data.name}}</text>
					<text class="label text-overflow text-overflow1">{{data.userinfo.username}}</text>
				</view>
				<view class="hor-end">
					<image class="stamp" :src="data.userinfo.headimg" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<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>

<style scoped>
	.index-card {
		width: 100%;
		height: 223px;
	}

	.poster {
		width: 100%;
		height: 156px;
		border-radius: 8px 8px 0 0;
	}

	.card-bottom {
		width: 100%;
		border-radius: 0px 0px 8px 8px;
		background: #F5F6F6;
		height: 60px;
		padding: 8px 8px 10px 8px;
	}

	.title {
		max-width: 120px;
		font-size: 15px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 0.8);
	}

	.label {
		max-width: 100px;
		font-size: 12px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 0.5);
	}

	.stamp {
		width: 24px;
		height: 24px;
		border-radius: 50%;
	}
</style>

• ② 在首页中使用

// 先引用插件
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>

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

---

总结

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

• 温馨提示：

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