提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 6. 商品列表
- 6.0 创建 goodslist 分支
- 6.1 定义请求参数对象
- 6.2 获取商品列表数据
- 6.3 渲染商品列表结构
- 6.4 把商品 item 项封装为自定义组件
- 在 goods_detail 组件中,循环渲染 my-goods 组件即可
- 6.5 使用过滤器处理价格
- 6.6 上拉加载更多
- 6.6.1 初步实现上拉加载更多
- 6.6.2 通过节流阀防止发起额外的请求
- 6.7 下拉刷新
- 6.8 点击商品 item 项跳转到详情页面
- 6.9 分支的合并与提交
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
6. 商品列表
6.0 创建 goodslist 分支
git checkout -b goodslist
6.1 定义请求参数对象
- 🌭🌭🌭根据接口的要求,事先定义一个请求参数对象
data() {return {// 请求参数对象queryObj:{// 查询关键词query:'',// 商品分类Idcid:'',// 页码值pagenum:1,// 每页显示多少条数据pagesize:10},//商品列表的数据goodsList:[],//总数量total:0};},
6.2 获取商品列表数据
- 将页面跳转时携带的参数,转存到 queryObj 对象中
onLoad(options){this.queryObj.query = options.query || '';this.queryObj.cid = options.cid || '';// 调用获取商品列表数据的方法this.getGoodsList()
}
methods:{async getGoodsList(){const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj);console.log(res)if(res.meta.status !== 200) return uni.$showMsg()this.goodsList = res.message.goods;this.total = res.message.total; }
}
6.3 渲染商品列表结构
<view class="goods-list"><block v-for="(goods,i) in goodsList" :key="i"><view class="goods-item"><!-- 左侧图片区域 --><view class="goods-item-left"><image class="goods-pic" :src="goods.goods_small_logo || defaultPic" mode=""></image></view><!-- 商品右侧信息区域 --><view class="goods-item-right"><!-- 商品标题 --><view class="goods-name">{{goods.goods_name}}</view><view class="goods-info-box"><!-- 商品价格 --><view class="goods-price">¥{{goods.goods_price}}</view></view></view></view></block></view>
.goods-item{display: flex;padding: 10px 5px;border-bottom:1px solid #f0f0f0 ;.goods-item-left{margin-right: 5px;.goods-pic{width: 100px;height:100px;display: block;}}.goods-item-right{display: flex;flex-direction: column;justify-content: space-between;.goods-name{font-size: 13px;}.goods-price{font-size: 16px;color: #c00000;}}
}
6.4 把商品 item 项封装为自定义组件
- 在 components 目录上鼠标右键,选择 新建组件
- 将 goods_list 页面中,关于商品 item 项相关的 UI 结构、样式、data 数据,封装到 my-goods 组件中
- 在 goods_list 组件中,循环渲染 my-goods 组件即可
// 定义 props 属性,用来接收外界传递到当前组件的数据props: {// 商品的信息对象goods: {type: Object,defaul: {},},},
在 goods_detail 组件中,循环渲染 my-goods 组件即可
<block v-for="(item, i) in goodsList" :key="i"><!-- 为 my-goods 组件动态绑定 goods 属性的值 --><my-goods :goods="item"></my-goods></block>
6.5 使用过滤器处理价格
- 🐱🏍🐱🏍🐱🏍在 my-goods 组件中,和 data 节点平级,声明 filters 过滤器节点
filters:{tofixed(num){return Number(num).toFixed(2) }
}
<!-- 商品价格 --><view class="goods-price">¥{{goods.goods_price | tofixed}}</view>
6.6 上拉加载更多
6.6.1 初步实现上拉加载更多
- 打开项目根目录中的 pages.json 配置文件,为 subPackages 分包中的 goods_list 页面配置上拉触底的距离
"subPackages":[{"pages":[{"path" : "goods_list/goods_list","style" : {"onReachBottomDistance": 150}}, ] }
]
- 在 goods_list 页面中,和 methods 节点平级,声明 onReachBottom 事件处理函数,用来监听页面的上拉触底行为
onReachBottom(){
// 让页码值自增 +1this.queryObj.pagenum += 1// 重新获取列表数据this.getGoodsList()
}
- 改造 methods 中的 getGoodsList 函数,当列表数据请求成功之后,进行新旧数据的拼接处理
methods:{async getGoodsList(){//...// this.goodsList = res.message.goods;this.goodsList = [...this.goodsList,...res.message.goods] }
}
6.6.2 通过节流阀防止发起额外的请求
- 在 data 中定义 isloading 节流阀
//是否正在请求数据isloading:false
- 修改 getGoodsList 方法,在请求数据前后,分别打开和关闭节流阀
methods:{
//发起请求const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)//关闭this.isloading = false
}
- 在 onReachBottom 触底事件处理函数中,根据节流阀的状态,来决定是否发起请求
//触底事件onReachBottom (){// 判断是否还有下一页数据if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total){return uni.$showMsg('数据加载完毕!')}// 判断是否正在请求其它数据,如果是,则不发起额外的请求if(this.isloading) returnthis.queryObj.pagenum += 1this.getGoodsList()},
6.7 下拉刷新
- 在 pages.json 配置文件中,为当前的 goods_list 页面单独开启下拉刷新效果
"subPackages":[{"path": "goods_list/goods_list","style": {"onReachBottomDistance": 150,"enablePullDownRefresh": true,"backgroundColor": "#F8F8F8"}},
]
- 监听页面的 onPullDownRefresh 事件处理函数
// 下拉刷新的事件
onPullDownRefresh() {// 1. 重置关键数据this.queryObj.pagenum = 1this.total = 0this.isloading = falsethis.goodsList = []// 2. 重新发起请求this.getGoodsList(() => uni.stopPullDownRefresh())
}
- 修改 getGoodsList 函数,接收 cb 回调函数并按需进行调用
// 获取商品列表数据的方法
async getGoodsList(cb){this.isloading = false// 只要数据请求完毕,就立即按需调用 cb 回调函数cb && cb()
}
6.8 点击商品 item 项跳转到详情页面
- 将循环时的 block 组件修改为 view 组件,并绑定 click 点击事件处理函数:
<view class="goods-list"><view v-for="(item, i) in goodsList" :key="i" @click="gotoDetail(item)"><!-- 为 my-goods 组件动态绑定 goods 属性的值 --><my-goods :goods="item"></my-goods></view>
</view>
- 在 methods 节点中,定义 gotoDetail 事件处理函数
//点击跳转到商品详情页面gotoDetail(item){uni.navigateTo({url:'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id})}
6.9 分支的合并与提交
-
将 goodslist 分支进行本地提交
–git add .
–git commit -m ‘商品列表’ -
将本地goodslist分支提交到远端
–git push -u origin goodslist -
将本地goodslist分支合并到master
–git checkout master
–git merge goodslist -
本地master推送到远端
–git push