<view class="helper-box">
// for循环
<block wx:for="{{helperMain}}" wx:key="index">
// 是根据数据动态生成的. 所以也需要列表渲染.
// {{selectedFlag[index]?"weui-cell-rot":""}}" 数据绑定是可以进行简单的 “ 三元运算 文档-数据绑定 ”,
// 如果selectedFlag[index]为true,则动态添加class类
<view class="{{selectedFlag[index]?'weui-cell-rot':''}}" data-index="{{index}}" bindtap="changeToggle">
<view class="weui-cell weui-cell-access">
<view class="weui-cell-bd">{{item.title}}</view>
<view class="weui-cell-ft"></view>
</view>
<view class="text-box">{{item.text}}</view>
</view>
// 改:data-index会拿到循环中每个对应的id值
<view class='item-box backg-white {{status === index ?"weui-cell-rot":""}}' data-index='{{index}}' data-status='{{status}}' bindtap="changeToggle">
...
</view>
</block>
</view>
1、this.data
更改的是js中的数据;that.setData
相当于通知原生view层的数据更新。
2、因为小程序采用MVVM,使用setData将数据从逻辑层
推到视图层显示
,会节省很多工作。
*注:在app.json中配置的属性会被子window的属性所覆盖。
page({
data: {
helperMain: [
{
index: "0", // 当前选中的栏id
title: "为什么获取不到个人头像?",
text: "第一次授权是为了获取用户的个人信息,如果用户拒绝授权就会引起数据显示不正常。"
}
],
selectedFlag: [false,false,false],
},
changeToggle: function(e) {
var index = e.currentTarget.dataset.index;
if (this.data.selectedFlag[index]) {
this.data.selectedFlag[index] = false;
} else {
this.data.selectedFlag[index] = true;
}
this.setData({
selectedFlag: this.data.selectedFlag
})
}
})
|---分割线---|
| |
------------------------------------------------- -------------------
data: {
status: '',
}
changeToggle: function(e) {
var that = this
var index = e.currentTarget.dataset.index,
status = e.currentTarget.dataset.status;
that.setData({
//重新设置data里面的"status"的值
'status' : ( status === index ? '' : index )
})
// 在 wepy框架下that.setData可直接用this替代
}
//
3、一般setData方法多用于点击后改变页面信息
或者刷新后与后台交互获取最新的信息
。
4、( status === index ? '' : index )
: 判断status 的值是否恒等index,不等于则传入index值给status。
5、e.currentTarget 代表的是,注册了监听点击事件的组件;e.target代表的是实际触发了点击事件的组件。
效果图: