上一篇
葱花炒鸡蛋超简单,贼香
学习微信小程序,总得与setData打交道。只有setData赋值过后,视图层才会产生变化,不然数据只停留在逻辑层。有基础的同学,阅读微信小程序文档很快,可以做到一天从入门到精通。在不知情的情况下,半只脚已经陷入setData的坑里。
编程时,对setData随时随地能够赋值大为满意,养成随手赋值的习惯。在学习的demo里,这种方法即好教学,又能表现足够的流畅。恰恰是这样,这种方法延续使用到繁杂的页面,页面出现了卡顿现象,悔之晚已。
JS//错误版赋值
this.setData({'name': '小明'})
this.setData({'sex': '男'})
this.setData({'age': '4'})
//正确版赋值
let object = {
'name': '小明'
,'sex': '男'
,'age': '4'
}
this.setData(object );
事后了解到setData赋值的参数是个对象,充许同时对多个值赋值。所以将所有的要赋值的数据整合到一个对象里,最后只做一次setData赋值。
在渲染二维数组列表时,往往赋值图个方便,直接对二维组数据直接赋值,导致视频页面数据全部刷新。
JSlet index = 1;
let user = this.data.user;
user[index] = {
'name': '小明'
,'sex': '男'
,'age': '4'
}
this.setData({'user': user}); //全局刷新视图页面
let key = 'user['+index+']';
this.setData({[key]: user[index]]}); //局部刷新视图页面
别小看这个小小的改动,小程序页面流畅提升一个档次。特别是无限下拉加载数据,随时数据越来越多,运算也随之增加,可降低页面卡顿成度。
微信小程序文档指出,setData短时间内,不能频繁赋值。这意味着,实时监听某个事件,实时改变某个值变成了不可能。比如:实时监听滚动条。连续赋值会导致值一直没发生变化,直到滚动停下来,赋值的数字像抽了疯,一直在跳动改变。证明setData赋值不是即时行为,往往赋值后,数据进入了缓冲池,最后才一口气爆发出来。
最新评论Latest comments