先说一下基本使用。官网也有。
比如说你在App.js里面有这些变量。想修改某些值。
data: { main_view_bgcolor: "", border: "", }
修改方式有两种,一是直接用“=”赋值,这种是可以修改,并且你把修改之后的值打印出来可以看到确实修改了,但是不推荐使用这样的方式。
因为,一般我们想修改data里面的值,往往都是因为这些数据都在main.wxml中绑定了,可以实现动态修改并实时刷新显示。刚刚这种方式容易发生数据被修改但是页面没有变化。
所以说一下下面这种方式:
在你绑定的自定义函数(往往都是绑定的点击事件)里面,
this.setData({ border:"aa"//这个border跟上面data里面的border是对应的。 })
//这里有一个ES6 this作用域的问题,切记...
这种方式,点击之后触发事件,执行函数,更新数据,同时可以实时更新渲染界面。
下面是一个例子:(我关闭了域名和https验证)
item.wxml
<view wx:for="{{userData}}" wx-for-index="index" wx-for-item="item"> {{index}}: {{item.name}} </view>
item.js
// pages/items/item.js Page({ /** * 页面的初始数据 */ data: { \'message\':\'message-string\', \'userData\':[{id:"123",name:"123"},{id:"456",name:"456"}] //初始值 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this;//把this对象复制到临时变量that const wxreq = wx.request({ url: \'http://jsonplaceholder.typicode.com/users\', data:{ //id:"1", //name:\'Leanne Graham\' }, success: function (res){ console.log(res.data); this.userData = res.data; //无效不能实时的渲染到页面 that.setData({ userData: res.data });//和页面进行绑定可以动态的渲染到页面 }, fail: function (res){ console.log(res.data); this.userData = "数据获取失败"; } }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
结果:
参考:https://www.ogeek.net/article/105467.htm