本文主要包含hbuilder mui,hbuilder mui视频教程,hbuilder mui教程,hbuilder mui api,hbuilder mui app等相关知识,教程希望在学习及工作中可以帮助到您
公司使用 Hbuilder MUI做的商城app,今天主要实现了购物车页面的一些功能,小编B5教程网感觉购物车页面是非常麻烦的一个页面,效果图如下:
下面总结一下需要实现的功能有哪些,方便以后新手学习mui做项目时有点思路。
1.删除问题
当用户删除一个商品的时候,我们需要处理哪些事情呢?
第一、要删除数据库里的数据,返回成功后,需要删除本页面的商品,为了实现不刷新页面,我们会是js去移除ul 里的li标签。
第二、需要处理底部购物车的数量,因为这个页面时两个webview实现的,我们需要使用mui.fire()触发自定义事情完成
2.改变每个商品的购买数量
当用户改变某个商品购买数量的时候,我们需要处理哪些事情呢?
假如增加或减少一个数量的时候就去执行修改数据库,我个人感觉这样非常的麻烦。我的思路是,在本页面先模拟一下数量和价格数据,当用户结算的时候,把每个商品的数量一起更新数据库,然后在查出来计算商品总结。
第一、改变商品总价
第二、修改购物车购买数量
3.结算勾选的商品
开始默认是全部选中,如果取消一个商品,那就的重新计算总价,还有购物车的商品数量
总结:虽然在项目中遇到很多困难点,我还是一步一步去克服了,做项目的时候思路非常的重要,只要你非常熟练功能的思路如何实现,代码实现起来那就不是问题了。