一.商品列表1.1 获取数据首先能够进入商品列表的途径
文章插图
文章插图
文章插图
传的数据有
文章插图
文章插图
文章插图
了解了这个之后就可以开始了，先创建分支
创建编译模式 ， 并分配初试数据
文章插图
这个时候就可以获取数据了
需要的数据
文章插图
所以在发起请求之前需要整理一下数据，先定义数据
文章插图
整理数据发起请求
文章插图
1.2 渲染页面注意我们可以去定义一个默认的图片在data ， 如果当前这个图片没有就为默认图片
文章插图
文章插图
1.3 item封装自定义组件创建组件
文章插图
新建插件
【uniapp/微信小程序 项目day03】
文章插图
然后将我们的结构复制过来，样式也复制过来
文章插图
然后就是组件利用方面 ， 既然封装的是item组件，就要提现item组件的复用性，所以item这个组件必然是在父组件里面被vfor的
所以遍历应该在父组件这边就完成，那么给子组件得到的数据就是每一个具体的goods，就可以先去改造子组件了
记得将默认图片也放在子组件
文章插图
父组件的改造
文章插图
然后子组件这边要接受
文章插图
注意props的简写形式，直接在后面为一个数组
文章插图
1.4 过滤器处理价格回顾一下vue的过滤器
首先关键字filters
然后里面是一个函数形式 ， 靠的是返回值，传进来的参数是等会要用的地方的插值语法的参数
文章插图
用的时候通过一个管道符连接，前面的值就相当于参数
文章插图
1.5 上拉加载更多首先修改我们的下拉触底的距离
注意，在uniapp里面没有单独的json文件，所以所有的页面的json修改都在同体的pages.json里面，对应的下面有一个对象这个就是他单独的json配置
文章插图
文章插图
然后在这个分包的下拉触底事件来操作
下拉刷新一次，就将页码加一页，同时请求数据里面也要改造一下 ， 赋值我们的列表数据，需要 进行一个扩展运算符的融合
文章插图
然后解决两个下拉触底经典问题
第一个是节流阀的问题，不能托底过快导致请求好几次数据
声明一个节流阀
文章插图
为什么放在下面表示数据请求完毕了才让他为fasle的，因为这是await ， 所以只有返回成功了才会进入下一步
文章插图
然后下拉触底事件判断
为true就出去，因为为true表示正在请求数据
推荐阅读
- 【炫丽】从0开始做一个WPF+Blazor对话小程序
- 小米mixfold屏幕供应商_小米mix fold屏幕是哪家的
- 小米11pro和小米10pro哪个值得买_小米11pro和小米10pro区别对比
- 欧莱雅小蜜罐和复颜抗皱哪个好用_哪个更适合30岁的女人
- vivox70pro+和小米11的区别_哪款更值得买
- 航海王热小队决战活动玩法详解攻略
- 小米11pro支持无线充电吗_小米11pro电池容量多少
- 成语故事大全 短小成语故事大全100篇
- applewatchseries7可以微信支付吗_applewatch微信支付怎么用
- 华为P50Pro和小米12Pro拍照哪款好-对比评测