aniu
aniu
  • 发布:2019-08-20 16:08
  • 更新:2022-10-28 18:14
  • 阅读:4280

页面绑定的数据深层次更新,Dom没有检测到导致页面并没有重新渲染。

分类:uni-app

这是一个上拉加载的回调函数,调用getListDataFromNet函数从服务端获取数据,然后更新到页面数据orderList中,因为orderList是一个二维数组,所以深层的数据更新不会触发Dom的重新渲染,于是在数据更新后添加强制重新渲染 this.$forceUpdate(); 问题解决。

upCallback(mescroll) {  
                //联网加载数据  
                this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{  
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;  
                    mescroll.endSuccess(curPageData.length);  
                    //设置列表数据  

                    if(mescroll.num == 1) this.orderList[this.tabIndex] = []; //如果是第一页需手动制空列表  
                    this.orderList[this.tabIndex]=this.orderList[this.tabIndex].concat(curPageData); //追加新数据  
                    console.log(this.orderList[this.tabIndex])  
                    this.$forceUpdate();  
                }, () => {  
                    //联网失败的回调,隐藏下拉刷新的状态  
                    mescroll.endErr();  
                })    
            },
1 关注 分享
skysowe

要回复文章请先登录注册

3***@qq.com

3***@qq.com

我用这个会比较慢 页面会直接卡顿
2022-10-28 18:14
5***@qq.com

5***@qq.com

this.$forceUpdate()
2021-05-15 15:22
skysowe

skysowe

原理应该就如此文里说的:https://blog.csdn.net/weixin_41767649/article/details/82797373,感谢作者和前面的回复者,提供了在uniapp中的解决方法
2020-08-30 00:16
aniu

aniu (作者)

回复 萌龙 :
感谢,这个方法更好
2019-08-21 10:20
DCloud_UNI_FXY

DCloud_UNI_FXY

参考 Vue 的注意事项:https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
2019-08-20 16:47
萌龙

萌龙

this.$set(this.orderList,this.tabIndex,this.orderList[this.tabIndex].concat(curPageData))
2019-08-20 16:41