微信小程序改变页面显示setData、修改数组、分页等学习笔记

一、setData

小程序页面加载渲染时是通过获取js文件中Page里面初始化数据data来进行渲染。

js：

　　/**

　　* 页面的初始数据

　　*/

　　data: {

　　　　name:'张三',

　　},

 

wxml：

　　<text>{{name}}</text>

 

结果：

 

 

完成渲染后，直接通过赋值是无法改变页面中所显示的数据，只能通过setData来改变（每次最多只能改变1M数据）。

如果通过直接赋值，如：this.data.name = '李四' ，是无法改变页面的显示，还会造成视图层和数据层数据不一致。

在js中onLoad函数中运行this.data.name = '李四' 

　　onLoad: function(options) {

　　　　this.data.name = '李四'； // 运行该命令修改data.name

　　},

结果无法改变视图显示

 

 

正确改变页面显示的做法：

js:

运行setData前页面初始化时的数据：

　　/**

　　* 页面的初始数据

　　*/

　　data: {

　　　　name: '张三',

　　　　age: 17,

　　},

　　 

 

运用setData后：

　　this.setData({

　　　　name:'李四',

　　　　age:18

　　})

　　结果：

　　

 

二、setData运用场景和方法

　　只要需要改变页面显示都需要运用setData （请求数据wx.request 后、 交互后 需要改变页面显示都需要通过setData 来改变）

　　1、改变对象某个属性

　　　　　　this.setData({

　　　　　　　　　　['info.name']: '李四',  // 此时属性名需要用字符串

　　　　　　　　　　['info.age']: 18

　　　　　　})

 

　　2、改变数组某个元素或对象属性

　　　　为了不影响性能不建议一次性更新整个数组（如果数组数据太大），应该只更新某个元素。

 

　　　　确定改变某个元素：　　

　　　　let str =`lists[2].name`; // 此时属性名需要用字符串

　　　　this.setData({

　　　　　　[str]:李四,

　　　　})

 

 　　 　不确定改变的是哪个元素（交互时，用户点击数组的某个元素对应改变显示内容）：

　　　  用户点击时可以把所点击的下标传回进行对应的更改；

　　　　　　click(i){

　　　　　　　　let index=1;

　　　　　　　　let str = `lists[${index}].name`；// 此时属性名需要用字符串

　　　　　　　　this.setData({

　　　　　　　　　　[str]:'李四',

　　　　　　　　})

 　　　　　　}

 

　　3、分页（适用于上拉加载更多）

　　　　分页为了避免一次性更新太多数据，建议把数据设计成二维数组如下：

　　　　通过wx:if来渲染。

　　　　每次加载新页面时在users后面新添加一页数据即可

　　　　　　users: [

　　　　　　　　[{name: '张三',age: 17}, {name: '张三',age: 17}], // 第一页数据

　　　　　　　　[{name: '张三',age: 17}, {name: '张三',age: 17}]  // 第二页数据

　　　　　　　　。。。。

　　　　　　　　[{name: '张三',age: 17}, {name: '张三',age: 17}]  // 第n页数据

　　　　　　]

 

　　　　　　let str = `users[${page}]`;

　　　　　　let datas=[{name: '张三',age: 17}, {name: '张三',age: 17}];  // 第n页数据

　　　　　　this.setData({

　　　　　　　　[str]:datas

　　　　　　})

 

 　　 wxml:

　　　　<block wx:for="{{users}}">

　　　　　　<view wx:for="{{item}}" wx:for-item="userItem">

　　　　　　　　<text>{{userItem.name}}</text>

　　　　　　　　<text>{{userItem.name}}</text>

　　　　　　</view>

　　　　</block>

 

 

以上是本人初学小程序的笔记，如有错误请指出

 

 

 

 

 

转载于:https://www.cnblogs.com/winglzy/p/10394924.html