uniapp个人踩坑记录-支付宝小程序篇

功能需求:使用v-for遍历数组,添加点击事件使点击到的元素添加active样式,如图

数据:
qg_array = [
    {current:false,name:1,b:2,id:1},
    {current:false,name:2,b:2,id:2},
    {current:false,name:3,b:2,id:3},
].
问题:点击按钮后样式没有变化
过程:
        1、会不会是代码问题,会不会是语法出现错误?但是经过排查并在微信小程序&百度小程序正常运行,排除了这个可能性;

        2、是不是兼容性问题,官方有没有文档指出这个?通过一顿操作官网、百度、加uni的qq群资询,都没有找到明文说明(小声bb:甚至都没找到关于这个bug的相关提问,是我出这个问题是特例吗?还是社区不成熟?)。

        3、会不会是数据已经改变,但是模板渲染时没有拿到最新数据,也就是说当uni的vue语法编译成支付宝小程序时不够兼容,导致数据双向绑定的实时更新失败呢?经过打印日志debugger查询,最终确定这个猜想成立,qg_array数据确实已经改变,但是v-for渲染没有即时更新。
            3.1、那么又抛出一个问题,那我对修改后的数据做一次赋值qg_array=[...qg_array]会不会达成目的?答案是否。。
            3.2、那么既然这样我就新建一个临时数组 tempArr来存放试试?tempArr:[] 当点击事件完成进行赋值this.tempArr=[...this.qg_array],然后通过判断tempArr中current修改样式。结果成功


个人结论:支付宝小程序对于v-for遍历的数据存在一定的兼容性,所以会存在对于动态修改数组中对象的属性后,不能即时更新(但是tempArr又即时更新了,那么是哪个环节出了问题呢?下次遇到再解决,下次一定.jpg)


我的解决方式:新建一个临时数组qg_tempArray = [...qg_array]作为判断依据,由原本判断qg_array[index].current来添加类名改为判断qg_tempArray[index].current.
最终效果图:


(o゜▽゜)o☆[BINGO!] 成功

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章