这里不需要每一个都去调用 ， 直接用mixin
文章插图
哪里要用直接导入并注册
文章插图
二.购物车页面2.1 渲染列表区域创建好编译模式 ， 首先是头部区域
用到了uniicon
文章插图
然后下面内容区域要渲染 ， 首先要有数据 ， 这里的数据存在vuex里面
文章插图
然后渲染上来 ， 这里我们之前封装过一个组件 ， 可以直接把这个组件拿来用 ， 遍历需要在外面遍历里面为每一个item的数据 ， 所以外面用block包裹
文章插图
2.2 封装radio我们这个组件由一个选择框 ， 所以要去改造原来的组件构造
文章插图
但是有个问题之前在商品列表用到了这个组件他不需要这个radio组件 ， 所以我们需要vif来判断
文章插图
文章插图
没有传值默认为false
文章插图
动态绑定checked
文章插图
2.3 修改勾选状态这里的思路是这样的先给组件来一个自定义事件
文章插图
回顾一下vue的自定义事件的参数e是对面传过来的参数 ， 只有原生事件才是事件对象
文章插图
然后组件这边真正的change事件
文章插图
将id和状态传过来
文章插图
传过来之后应该修改state状态 ， 但是要在vuex里面修改 ， 为什么 ， 因为我们的这些数据数组都是从里面拿过来的所以要在源头上修改
文章插图
找到后将其取反
文章插图
将参数传进来即可
文章插图
2.4 numberBox这个是uni的一个组件 ， 展示加减数量的
使用这个组件 ， 固定最少为1 ， 并把默认值改为我们添加购物车的数量
文章插图
然后就是让他在特定区域才显示
文章插图
2.5 num-change我们的numberBox虽然可以加减变化 ， 但是我们的父页面并没有检测到变化 ， 所以购物车badge也没有对应的更新
需要改造一下这个事件
他有一个change事件 ， 参数就是当前改变的值
文章插图
经验总结扩展阅读
- 支付宝蚂蚁庄园2022年8月14题目答案是什么
- 金铲铲之战小小阿卡丽多少钱
- 温柔高格调的签名短句 精致又很小众的签名
- 小米手机和华为手机哪个好_小米耐用还是华为耐用
- 小朋友玩耍开心的朋友圈说说
- 祝愿小朋友的成长寄语 祝福女儿未来美好的句子
- 2023年11月22日农历十月初十小雪宜乔迁吗
- 微信小程序canvas 证件照制作
- 2022蚂蚁庄园8月16日答案最新
- 小米盒子4s pro评测_小米盒子4s pro怎么样