纵有疾风起
人生不言弃

微信小程序之this.setData

Page.prototype.setData()

setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。

注意:

  1. 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。
  2. 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

setData() 参数格式

接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。

其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].messagea.b.c.d,并且不需要在 this.data 中预先定义。

Page({  data: {    text: 'init data',    array: [{text: 'init data'}],    object: {      text: 'init data'    }  },  changeText: function() {    // this.data.text = 'changed data'  // bad, it can not work    this.setData({      text: 'changed data'    })  }


先说一下基本使用。官网也有。

比如说你在main.js里面有这些变量。想修改某些值。
data: {main_view_bgcolor: "",border: "",}
修改方式有两种,一是直接用“=”赋值,这种是可以修改,并且你把修改之后的值打印出来可以看到确实修改了,但是不推荐使用这样的方式。
因为,一般我们想修改data里面的值,往往都是因为这些数据都在main.wxml中绑定了,可以实现动态修改并实时刷新显示。刚刚这种方式容易发生数据被修改但是页面没有变化。
所以说一下下面这种方式:
在你绑定的自定义函数(往往都是绑定的点击事件)里面,
this.setData({border:"aa"//这个border跟上面data里面的border是对应的。})

这种方式,点击之后触发事件,执行函数,更新数据,同时可以实时更新渲染界面。

2、高能高能,这个就是那个都是瓶渣子的坑(哭状)

  data: {    main_view_bgcolor: "",    border: "",    isChecked: [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true]}

如上,如果我想动态修改isChecked里面指定某个下标的值怎么办?

首先我先喷一句,这是百度知道网友给的回答。https://zhidao.baidu.com/question/1434931285716531579.html

你TM就不能把代码多粘贴一点?会死啊?鬼知道你写的什么意思。

好了(故作正经),下面我来说怎么动态修改一个对象的某元素的值。上面这个是索引下标,等会还有个key-value的例子。

代码:

复制代码
click: function (e) {        var id = e.target.id//根据点击不同的view获取对应的id值    var str = "isChecked[" + id + "]"//重点在这里,组合出一个字符串    this.setData({      [str]: false//用中括号把str括起来即可    })}
复制代码

看注释。点击->触发对应事件->来到click函数这里,根据点击的view获取对应的id,修改指定下标的isChecked。

上面这个isChecked的索引是从0到n的,即可以通过isChecked[0]、isChecked[1]来访问。可以在操作的过程中打印日志看一下数据类型。

哦,对了,在wxml中如果要绑定isChecked中元素的值,可以这么:

<view class=”{{isChecked[2]?’main_view’:’main_view_clicked’}}” bindtap=’click’ bindlongpress=’cancelclick’ id=’2′ bindtap=’click’></view>
不要在意那个三目运算,反正类似于js中访问方式,也是isChecked[index]。同理,下面的key-value类型的就可以通过isChecked[index].key来绑定数据了。

下面是key-value类型的:

复制代码
data: {    main_view_bgcolor: "",    border: "",    isChecked: [      {         key: true       },      {         key: true       },      {         key: true      }    ]}
复制代码

直接写操作方式了(因为就跟上面只有一点点的区别):

    var str = "isChecked[" + id + "].key"    this.setData({      [str]: false    })

文章转载于:https://www.cnblogs.com/shenzikun1314/p/8496888.html

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 微信小程序之this.setData
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录