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

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

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

文章目录

一、今日实战目标
二、实战步骤
- 1. 导入懒加载插件
- 2.引入插件
- 3. 封装列表组件
总结

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

一、今日实战目标

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

二、实战步骤

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。

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

uniapp实战项目（仿知识星球App) - - 配置开发工具和全局css样式
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 效果篇
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 引入uView框架
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - tabBar配置
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 利用computed监听用户操作
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 封装组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
Vue3电商项目实战-首页模块7【26-首页主体-商品区块、27-首页主体-最新专题、28-首页主体-图片懒加载】
文章目录 26-首页主体-商品区块 27-首页主体-最新专题 28-首页主体-图片懒加载 26-首页主体-商品区块目的: 完成商品区域展示. 大致步骤: 准备一个商品盒子组件 home-goods ...
uni-app 图片懒加载
uni-app 图片懒加载功能实现图片懒加载,并且显示数组中,始终只有3张图片,上下滑动增加的同时,删除最开始的那一张.可以指定从总图片的第几张开始加载. 思路要实现上下滑动时的动画效果,我这里 ...

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

文章目录

一、今日实战目标

二、实战步骤

1. 导入懒加载插件

2.引入插件

3. 封装列表组件

总结

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

最新文章

热门文章

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

文章目录

一、今日实战目标

二、实战步骤

1. 导入懒加载插件

2.引入插件

3. 封装列表组件

总结

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

最新文章

热门文章

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

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