博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序setData详解
阅读量:6143 次
发布时间:2019-06-21

本文共 3165 字,大约阅读时间需要 10 分钟。

  1. 参数接受一个对象,以 key,value 的形式表示
  2. 可以一下设置一个或多个data数据
this.setData({     list:'change data',     info:'change data'  })  复制代码
  1. key可以以数据路径的形式给出(路径形式的key必须带引号)+数据可以不预设
this.setData({      'array[0].text':'changed data'  //数据路径key必须带‘’引号    }) this.setData({      'object.text': 'changed data'   //数据路径key必须带‘’引号    });    等于     this.setData({      object:{      text: 'changed data'         }    });复制代码

  1. key值可以为变量,为变量的时候要用[ ]引起来
page({    data:{      todos:[     {id:0,text:'abc',isDelete:false},     {id:1,text:'abc',isDelete:false},    {id:2,text:'abc',isDelete:false} ]   //array  },    change(e){      var index = e.currentTarget.dataset.id;      var deletedtodo='todos['+index+'].idDelete';      this.setData({         [deletedtodo]:true      })    }  })  复制代码
  1. 单次设置的数据不能超过1024KB,请尽量避免一次设置过多的数据 一般情况下,更新items的操作可能如下:
loadItems() {    //假设通过API获取到新的列表数据:newItems    const { items } = this.data;  //deconstructing... items from this.data;    this.setData({       items: items.concat(newItems)  //append new data...  })}//The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.//复制代码

如果完整items的数据量不大的时候,这样做也是可以的,但是列表的数据比较多的时候,后面loadItems时setData的数据就会变很大,超过一定值(1048576)后就会报以下错误,然后列表无法再加载更多

数据传输长度为 xxxxxx 已经超过最大长度 1048576

若遇到这样的情况,我的解决方法是

loadItems() {    //依然假设通过API获取到新的列表数据:newItems    const { items } = this.data;    const start = items.length;    const updateItems = newItems.reduce((updateItems, item, index) => {         updateItems[`items[${start + index}]`] = item;   //use template literal        return updateItems;    }, {//inital values of updateItems//}) //this is {}  //updateItems 示例: { items[0]: 'content', items[1]: 'content', ... }  this.setData(updateItems)}复制代码

GREAT idea!!

方法一、

Page({  data: {    list: [ 1, 2, 3 ]  },  /**   * Lifecycle function--Called when page load   */  onLoad: function (options) {    let that = this;    let self = that.data;    var newList = [4,5];    let length = self.list.length;    console.log(length)    let newData = newList.reduce((acc, v, i) => {      acc[`list[${length + i}]`] = v;      return acc;    }, {});//return a {}    console.log(newData)    that.setData(newData)    console.log(self)  },)}复制代码

方法二、

data: {  list: [[1, 1], [2, 2], [3, 3]]},/** * Lifecycle function--Called when page load */onLoad: function (options) {  let that = this;  let self = that.data;  var newList = [4, 4];  let length = self.list.length;  console.log(length)  var newData = {};  newData[`list[${length}]`] = newList;  console.log(newData)  that.setData(newData)  console.log(self)},复制代码
  1. 可以定义变量名称一致

// example/test/test.js

Page({  data: {         ceshi: [2,3,4]  },  /**   * Lifecycle function--Called when page load   */   /**   * Lifecycle function--Called when page is initially rendered   */  onReady: function () {    var ceshi=this.data.ceshi;    ceshi.push(5)    this.setData(      {ceshi}  //this will overwrite the ceshi key in data object    )    console.log(ceshix)    console.log(this.data)        },复制代码

在方法中,我们定义ceshi变量让其等于that.data.ceshi; 然后对ceshi进行操作,其实就是对that.data.ceshi进行操作,而that.setData({ceshi})就等同于that.setData({ceshi : ceshi }) ;

转载地址:http://hjnya.baihongyu.com/

你可能感兴趣的文章
openGL 初试 绘制三角形 和添加鼠标键盘事件
查看>>
学习笔记,发QQ邮件
查看>>
为什么要用存储过程
查看>>
Java中如何实现Tree的数据结构算法
查看>>
解决iframe加载的内容有时显示有时不显示
查看>>
.NET Core微服务之基于IdentityServer建立授权与验证服务
查看>>
分布式Java应用:基础与实践
查看>>
PDA Battery Info (VB.Net+.Net CF) Source Code
查看>>
HDU 1693 Eat the Trees(插头DP)
查看>>
mass Framework fx模块 v3
查看>>
Pentaho Report Designer 发布报表设置
查看>>
sama5d3 环境检测 adc测试
查看>>
HomeBrew
查看>>
jquery 之height(),innerHeight(),outerHeight()方法区别详解
查看>>
python之 正则表达式
查看>>
开发微博应用【5】应用的使用频率
查看>>
python 学习笔记 if语句(10)
查看>>
C编译器、链接器、加载器详解
查看>>
watir学习资料
查看>>
Objective-C中的继承与复合技术(转)
查看>>