移动端-bug记录

一、商城app
1.不停的点击规格进行规格切换时接口未返回最新的商品数据就点击【立即购买】校验库存,实际上传参时还是传递的上一个规格的参数。
在这里插入图片描述
解决方案:在规格信息接口调用完成,返回最新数据后才能点击配【立即购买】,需要加一个遮罩层来控制按钮的点击。
在这里插入图片描述
2.封装Tabbar时,Tabbar信息是首页list接口返回的,在子组件中打印父组件传递的list却是’null’。
在这里插入图片描述
原因:项目启动时,父子组件的执行顺序是
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
所以,子组件挂载之前,父组件挂载在后,进行数据回显的时候,在父组件mounted中获取api的数据在一开始是没办法传递到子组件的,所以在子组件中打印传递的数据是’null’,当父组件拿到api的数据,更新了传递给子组件的数据后,再传递给子组件,子组件才能拿到数据。
解决方案:在子组件中,对传递的数据进行监听,当传递的数据不为‘null’的时候,进行逻辑操作。
在这里插入图片描述
3.TabBar信息是首页接口返回,在购物车等页面同样需要该TabBar,而在每一个页面都调用一下首页接口,有点小题大做,而且由于接口返回时间问题,会造成底部TabBar闪烁的情况。
解决方案:商城默认展示的是首页,在首页获得TabBar导航信息,传入子组件,在子组件中存入本地缓存或者vuex中,在组件渲染的时候用保存在缓存的的数据。仍存在一个问题是,第一次渲染的时候还没有存入本地缓存,所以需要判断本地缓存中是否有这个数据,有则用,没有则需要使用首页传递过来的数据。
在这里插入图片描述
4.使用swiper插件进行轮播,设置loop循环轮播时,第二次轮播第一张图片的点击事件失效。

原因:loop模式下,swiper会复制轮播列表的第一个和最后一个图片,但不会复制dom节点的点击事件,所以会出现第二次轮播时,第一张图片的点击事件失效。
解决方法:
使用swiper插件自带的点击事件监听,而不是在图片上添加点击事件。
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45791799/article/details/125292362