前端局部自动刷新_微信小程序使用setData实现局部刷新

微信小程序中我们经常用setData来将数据从逻辑层发送到视图层(异步)，同时改变对应的 this.data 的值(同步)。

正常场景下，首次请求接口>接口返回数据>setData数据>视图渲染

一般界面上都会有刷新按钮、或者下拉刷新，当点击刷新按钮，只想更新部分数据怎么办，这时就要用到局部刷新了。下面举例来具体实现：

初始数据如下

Page({

/**

* 页面的初始数据

*/

data: {

arr:[

{

id:1,

name:"张三",

age:13

},

{

id:2,

name:"李四",

age:14

}

]

},

})

通过请求接口，拿到返回数据，假设接口的返回数据中 “张三”的 age变更为23，“李四”的 age变更为24

getUser() {

let that = this;

wx.request({

url: 'test.php', //仅为示例，并非真实的接口地址

data: {

x: '',

y: ''

},

header: {

'content-type': 'application/json' // 默认值

},

success(res) {

console.log(res.data)

/*

res.data = [

{

id:1,

name:"张三",

age:13

},

{

id:2,

name:"李四",

age:14

}

]

*/

for (let i = 0, len = res.data.length; i < len; i++) {

let age = 'arr[' + i + '].age';//arr跟this.data.arr名称保持一致

that.setData({

[age]: res.data[i].age//左边的age要用[] 包裹

})

}

}

})

}

这样就实现了局部刷新页面数据