实战项目名称:仿知识星球App
技术栈:前端 =>uni-app
( 后端:Node.js + Mysql + Apollo + Graphql )
已实现功能:微信登录,创建星球,内容管理,星球管理
项目git地址:请点击访问
项目最终效果图:@点击访问效果图,欢迎关注收藏订阅专栏!!!
提示:该项目只用于个人实战,不应用于任何商业用途。
一、今日实战目标
- 实现图片懒加载
- 封装首页列表组件
二、实战步骤
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下来借鉴下;
- 温馨提示:
- 项目仅用于个人实战,设计图和架构是自己基于
知识星球APP
进行设计的,算得上是入门级的uni-app,后期会更新一个企业级uniapp项目
。 - 我是在空闲中写写博客,并没有很规范,欢迎在评论区留下你的建议与意见。
git
项目拷贝下来的代码有不懂的,可以截图私信给我,看到会回复你,希望可以帮助到你了解和开发uniapp。