(6).使用过滤器处理价格
1.在 my-goods 组件中，和 data 节点平级，声明 filters 过滤器节点如下：
filters:{ // 把数字处理为带两个小数点的数字 tofixed(num){ // 保留两个橡树 return Number(num).toFixed(2) } }
2.在渲染商品价格的时候，通过管道符 | 调用过滤器：
<!-- 商品价格 --> <view class="goods-price">￥{{item.goods_price | tofixed}}</view>
(7).下拉加载更多
- 下拉加载更多
[...arr1,...arr2] 就是数组之间进行拼接的操作
const arr = [...[1, 2, 3, 4], ...[1, 2, 3, 4]] console.log(arr, 'xxxxxxxxxxxxxxxxx')
1.打开项目根目录中的 pages.json 配置文件，为 subPackages 分包中的 goods_list 页面配置上拉触底的距离：
{ "path": "goods_list/goods_list", "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false, "onReachBottomDistance": 150 }
2.在 goods_list 页面中，和 methods 节点平级，声明 onReachBottom 事件处理函数，用来监听页面的上拉触底行为：
onReachBottom() { // 让页码进行自增的操作 this.queryObj.pagenum++ // 进行触发函数方法 this.getGoodsList() },
3.改造 methods 中的 getGoodsList 函数，当列表数据请求成功之后，进行新旧数据的拼接处理：
async getGoodsList() { const { data: resp } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) if (resp.meta.status === 200) { // 赋值商品数据-》 旧数据和新数据进行拼接，旧数据初始化为null,然后新数据默认先访问第一页的数据，进行了拼接的操作 this.goodsList = [...this.goodsList, ...resp.message.goods] // 赋值总条数 this.total = resp.message.total } else { uni.$showMsg() } console.log('商品链表的数据->', resp) } } }
- 通过节流阀防止发起额外的请求
goods_list.vue
// ⭐设置mask节流 uni.showLoading({ title: '正在努力加载数据中...', mask: true // 节流的操作 }) // 手动关闭加载的操作 uni.hideLoading()
- 判断数据是否加载完毕 (这个拦截放在上拉函数中)
pageSize*page>=total
goods_list.vue
onReachBottom() { // 放在页面自增的前面 if (this.queryObj.pagesize * this.queryObj.pagenum >= this.total) { return uni.$showMsg('亲，到底了') } // 让页码进行自增的操作 this.queryObj.pagenum++ // 进行触发函数方法 this.getGoodsList() },
- 开启下拉刷新 (需要关闭下拉)
page.json
{ "path": "goods_list/goods_list", "style": { "navigationBarTitleText": "", "enablePullDownRefresh": true, "onReachBottomDistance": 150, "backgroundColor": "#f8f8f8" }
goods_list.vue
// 用户下拉的事件 onPullDownRefresh() { this.queryObj.total = 0 this.queryObj.pagenum = 1 this.queryObj.goodsList = [] // 重新调用请求的方法，并携带上关闭的回调函数 this.getGoodsList(() => uni.stopPullDownRefresh()) },
methods: { // 通过点击的参数获取数据 async getGoodsList(cb) { // ⭐设置mask节流 uni.showLoading({ title: '正在努力加载数据中...', mask: true }) const { data: resp } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) // 只要数据请求完毕，就立即按需调用 cb 回调函数 cb && cb() if (resp.meta.status === 200) { // 赋值商品数据-》 旧数据和新数据进行拼接，旧数据初始化为null,然后新数据默认先访问第一页的数据，进行了拼接的操作 this.goodsList = [...this.goodsList, ...resp.message.goods] // 赋值总条数 this.total = resp.message.total } else { uni.$showMsg() } console.log('商品链表的数据->', resp) // 手动关闭加载的操作 uni.hideLoading() } } }
(8).商品点击item项目进入商品详情页
1.将循环时的 block 组件修改为 view 组件，并绑定 click 点击事件处理函数：
goods_list.vue
<view class="goods_list"> <view v-for="(item,index) in goodsList" :key="index"> <!-- 绑定自定义事件 并传递 item数据。 子类接受的名字是 item --> <my-goods :item="item"></my-goods> </view> </view>
// 进入详情页 gotoDetail(item) { uni.navigateTo({ url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id }) }
(9).分支的合并与提交
git add . git commit -m "完成了商品列表" git push -u origin gooddslist
git checkout master git add . git commit -m "完成了商品列表" git merge gooddslist git push git branch -d goodslist
