[[379367]]

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz

首先謝謝大家對花妖的支持，也感謝那些給花妖提建議和鼓勵的人們，花妖將繼續(xù)努力，將更多的作品呈現(xiàn)給大家。

今天簡單整理在鴻蒙商城購物車和參數(shù)傳的過程中容易出錯的小細(xì)節(jié)。花妖以茶葉為主題，做一個茶葉店鋪的購物車。老規(guī)矩，上圖：

圖一：下圖為購物車的整體視圖

在做購物車圖標(biāo)的時(shí)候，花妖先嘗試了一下啟用display布局，然后居中，這樣做雖然能讓購物車圖標(biāo)精確的居中，但是后期的添加商品數(shù)量小標(biāo)志的視效果就很難看。

圖二：添加商品數(shù)量小標(biāo)志樣式中加上position:absolute;樣式可以變回來，但是位置也被居中了，不符合客戶平常使用習(xí)慣。

圖三、棄用之前購物車的display布局，也加上position:absolute布局樣式

這里花妖經(jīng)過多次嘗試，X坐標(biāo)給300px正好符合居中標(biāo)準(zhǔn)。再將添加商品數(shù)量標(biāo)記再移動70px左右就大功告成了。

圖四、圖五：如何實(shí)現(xiàn)添加商品參數(shù)在初始值時(shí)隱藏效果?

利用三元運(yùn)算方法設(shè)置參數(shù)初始值為0，再利用index下標(biāo)相加>0的方法，就可以實(shí)現(xiàn)初始時(shí)添加商品參數(shù)隱藏的效果。

圖六、++表示當(dāng)前的值加1，設(shè)置用戶的購物車商品記錄方式和跳轉(zhuǎn)頁面帶參數(shù)(shoppingcar)

圖七、新建接收跳轉(zhuǎn)數(shù)據(jù)的頁面，接收數(shù)據(jù)參數(shù)和傳送數(shù)據(jù)參數(shù)要相一致(shoppingcar)

接下來只要把接收頁面和傳送頁面一樣做一個數(shù)組循環(huán)加樣式修飾就可以了。

最終操作效果視頻展示已上傳，有興趣的朋友可以在花妖的主頁自行尋找，謝謝。

©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責(zé)任。

想了解更多內(nèi)容，請?jiān)L問： 

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz