小程序 - 手风琴折叠效果

<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代表的是实际触发了点击事件的组件。

效果图：