一.加入購物車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
這里不需要每一個都去調用，直接用mixin
文章插圖
哪里要用直接導入并注冊
文章插圖
二.購物車頁面2.1 渲染列表區域創建好編譯模式，首先是頭部區域
用到了uniicon
文章插圖
然后下面內容區域要渲染，首先要有數據，這里的數據存在vuex里面
文章插圖
然后渲染上來，這里我們之前封裝過一個組件 ， 可以直接把這個組件拿來用，遍歷需要在外面遍歷里面為每一個item的數據，所以外面用block包裹
文章插圖
2.2 封裝radio我們這個組件由一個選擇框，所以要去改造原來的組件構造
文章插圖
但是有個問題之前在商品列表用到了這個組件他不需要這個radio組件，所以我們需要vif來判斷
推薦閱讀
- 關于.Net和Java的看法-一個小實習生經歷
- 金鏟鏟之戰小小阿卡麗多少錢
- 小米手機和華為手機哪個好_小米耐用還是華為耐用
- 微信小程序canvas 證件照制作
- 小米盒子4s pro評測_小米盒子4s pro怎么樣
- 小米11ultra和小米11pro參數_參數配置詳情對比
- 小度智能屏x10不插電源可以用嗎?
- 小米11ultra怎么讀取u盤_讀取u盤方法教程
- iqoo8pro和小米11ultra區別對比_哪款更值得入手
- 北京市小客車指標中簽查詢 北京市小客車指標查詢