鸿蒙的商品购物车和参数传递过程中的注意事项 原创 精华

牡丹花妖精
发布于 2021-1-28 11:45
浏览
0收藏

        首先谢谢大家对花妖的支持,也感谢那些给花妖提建议和鼓励的人们,花妖将继续努力,将更多的作品呈现给大家。

        今天简单整理在鸿蒙商城购物车和参数传的过程中容易出错的小细节。花妖以茶叶为主题,做一个茶叶店铺的购物车。老规矩,上图:

图一:下图为购物车的整体视图

鸿蒙的商品购物车和参数传递过程中的注意事项-鸿蒙开发者社区        在做购物车图标的时候,花妖先尝试了一下启用display布局,然后居中,这样做虽然能让购物车图标精确的居中,但是后期的添加商品数量小标志的视效果就很难看。

        图二:添加商品数量小标志样式中加上position:absolute;样式可以变回来,但是位置也被居中了,不符合客户平常使用习惯。鸿蒙的商品购物车和参数传递过程中的注意事项-鸿蒙开发者社区

图三、弃用之前购物车的display布局,也加上position:absolute布局样式鸿蒙的商品购物车和参数传递过程中的注意事项-鸿蒙开发者社区

        这里花妖经过多次尝试,X坐标给300px正好符合居中标准。再将添加商品数量标记再移动70px左右就大功告成了。

图四、图五:如何实现添加商品参数在初始值时隐藏效果?

鸿蒙的商品购物车和参数传递过程中的注意事项-鸿蒙开发者社区鸿蒙的商品购物车和参数传递过程中的注意事项-鸿蒙开发者社区        利用三元运算方法设置参数初始值为0,再利用index下标相加>0的方法,就可以实现初始时添加商品参数隐藏的效果。

图六、++表示当前的值加1,设置用户的购物车商品记录方式和跳转页面带参数(shoppingcar)鸿蒙的商品购物车和参数传递过程中的注意事项-鸿蒙开发者社区

图七、新建接收跳转数据的页面,接收数据参数和传送数据参数要相一致(shoppingcar)

鸿蒙的商品购物车和参数传递过程中的注意事项-鸿蒙开发者社区        接下来只要把接收页面和传送页面一样做一个<block>数组循环加样式修饰就可以了。

 

        最终操作效果视频展示已上传,有兴趣的朋友可以在花妖的主页自行寻找,谢谢。

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
已于2021-1-28 11:45:43修改
3
收藏
回复
举报
7条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

相关的视频链接我来贴下:https://harmonyos.51cto.com/show/2990,大家可以点击链接直接前往

1
回复
2021-1-28 13:52:19
牡丹花妖精
牡丹花妖精 回复了 红叶亦知秋
相关的视频链接我来贴下:https://harmonyos.51cto.com/show/2990,大家可以点击链接直接前往

谢谢,花妖初来鸿蒙社区,还不太熟练,后期会努力学习改正。

回复
2021-1-28 18:07:51
SummerRic
SummerRic

LZ多直接贴代码或者发代码包哦~

回复
2021-1-28 18:19:42
牡丹花妖精
牡丹花妖精

好哒好哒,后期会整理的,谢谢提醒。

回复
2021-1-28 18:25:12
六合李欣
六合李欣

楼主写得很清晰,思路非常的敏捷

回复
2021-1-28 21:14:21
张荣超_九丘教育
张荣超_九丘教育

很棒的分享,期待后续更新^_^

回复
2021-1-28 22:08:26
牡丹花妖精
牡丹花妖精 回复了 张荣超_九丘教育
很棒的分享,期待后续更新^_^

谢谢张老师的肯定,花妖会更加的努力。

回复
2021-1-30 16:58:18
回复
    相关推荐