微信小程序使用setData实现局部刷新

2019-10-18阅读(173)评论(0)牵着狗狗看MM

苏州实时公交查询

微信小程序中我们经常用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要用[] 包裹
                })
            }
        }
    })
}

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

赞(1) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 微信小程序使用setData实现局部刷新
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏