评论

小程序setData

setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口。 对于对象或数组字段,可以直接修改一个其下的子字段,这样做通常比修改整个对象或数组更好​

setData
  setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口。
  Object 以 key: value 的形式表示,将 this.data 中的 key 对应的值改变成 value。
  具体的介绍请看微信开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html
注意:
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致
单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
this.setData 两种情况赋值 触发渲染 页面
xxx.js 中 data 的数据

lunList: [
      { id: 0, choose: false, },
      { id: 1, choose: false, },
      { id: 2, choose: false, }
    ]
showlun: function (e) {
    var _this = this, index = e.currentTarget.dataset.id;
    console.log(e, index) //index,表示点击的第几个索引
    if (_this.data.lunList[index].choose == false) {
         _this.data.lunList[index].choose=true
    } else {
     _this.data.lunList[index].choose=false
    }
    _this.setData({
        lunList:_this.data.lunList
    })
  console.log(_this.data.lunList)
  }

ps:数据一旦过大,再js中操作整个数据渲染页面

showlun: function (e) {
    var _this = this, index = e.currentTarget.dataset.id;
    console.log(e, index)
   //重点 字符串组合的形式, this.setData 自动识别为 ["lunList[2].choose"] 这样直接操作 数据中的某一项直接赋值
    var ss = 'lunList[' + index + '].choose' 
    if (_this.data.lunList[index].choose == false) {
      _this.setData({
        [ss]: true
      })
    } else {
      _this.setData({
        [ss]: false
      })
    }
  console.log(_this.data.lunList)
  }

ps:对于对象或数组字段,可以直接修改一个其下的子字段,这样做通常比修改整个对象或数组更好


点赞 1
收藏
评论

3 个评论

  • 秦强
    秦强
    2019-10-12

    一唯数组转为二维数组

    2019-10-12
    赞同
    回复
  • Wang
    Wang
    2019-09-26

    如果删除list中的一个元素呢,怎么处理比较好

    2019-09-26
    赞同
    回复 1
    • 拾忆
      拾忆
      2019-09-26

      1.id 动态获取   使用字符串模板   渲染的数组 arr

      this.setData({

      [`arr[${id}]`]:null

      })

      2.wxml 进行判断不为null渲染 页面

      2019-09-26
      1
      回复
  • 醉清风
    醉清风
    2019-07-03


    2019-07-03
    赞同
    回复
登录 后发表内容