一.加入购物车1.1 购物车数量先创建购物车git
文章插图
这里的数据肯定要做全局数据 ， 因为不能只在details这个页面去操作他 ， 他到底有几个也是由购物车页面获取到的
文章插图
所以需要vuex
创建store文件夹
文章插图
往main注册之后 ， 创建自己的仓库
文章插图
文章插图
1.2 思路连同上面的一起 ， 加入购物车的整体思路应该是这样
store里面存的应该是整个购物车的数据 ， 也就是每一条购物车的数据 ， 是个数组 ， 为什么要这么做 ， 因为我们这里购物车里面是没有接口的 ， 所以我们需要点击的每一个加入购物车自己来保存 ， 我们的小购物车显示里面有多少数据 ， 就可以直接用她的length来做了
当我们点击加入购物车 ， 就应该整理goods的数据 ， 然后当做参数传进来 ， 通过一个 find函数 ， 找到就会返回找到的第一项 ， 没有到就返回undefined ， 找到就让返回的这一项里面的count++ ， 表示数量+1 ， 没找到就往购物车列表里面添加一条数据
文章插图
然后这里注意 ， 由于我不需要actions做什么所以就直接提交到mutations了 ， 放在methods ， 相当于把这个函数放进来了 ， 整理参数后 ， 还要去this来调用这个函数
文章插图
1.3 动态统计购物商品总数量通过getters统计所有的count的数量
文章插图
获取到getters
文章插图
最关键的需要监视他 ， 当他一变化 ， 就让我们的uni-goods-nav里面的info动态变化即可
这里照样用的find来找满足条件的第一项 ， 最关键的一点这里直接修改找出来的值 ， data里面的数据也会变 ， 为什么 ， 因为这里没有浅拷贝 ， 所以这个值就是data里面的值
文章插图
1.4 持久化存储购物车因为我们刚才是存在vuex里面 ， 所以保留期限并不长久
我们就要对刚才的vuex做一下改造 ， 我们每一次点击添加都应该往storage存一份 ， 同时state里面的数据也需要重新定义一下 ， 应该是拿storage里面的 ， 没得就为空数组但是是字符串型
文章插图
1.5 tabBar购物车设置徽标在他的onShow钩子 ， 页面展示触发 ， 可触发多次
这里会用到一个api uni.setTabBarBadge专门设置tabBar右上角的一些文本
文章插图
但是这样有个问题 ， 就是我只在购物车这个tabbar里面会显示 ， 在其他tabbar就没有调用这个api
经验总结扩展阅读
- 支付宝蚂蚁庄园2022年8月14题目答案是什么
- 金铲铲之战小小阿卡丽多少钱
- 温柔高格调的签名短句 精致又很小众的签名
- 小米手机和华为手机哪个好_小米耐用还是华为耐用
- 小朋友玩耍开心的朋友圈说说
- 祝愿小朋友的成长寄语 祝福女儿未来美好的句子
- 2023年11月22日农历十月初十小雪宜乔迁吗
- 微信小程序canvas 证件照制作
- 2022蚂蚁庄园8月16日答案最新
- 小米盒子4s pro评测_小米盒子4s pro怎么样