小程序 toggle ，列表的展示和隐藏

截止到目前（2017-5-19），小程序还未提供良好的toggle功能。在开发的时候，本身作了一个简单的实现。其中还遇到了一些其余的小麻烦，这里与你们探讨：

---

情景：从远端获取数据，在小程序界面展示标题列表，点击标题查看详情。

---

实现
1）：获取数据后，只展示标题，把详情隐藏起来。显然这里须要增长一个开关，标题增长一个点击事件，控制详情展示：

`<block wx:for="{{logisticsList}}" wx:key="this" wx:for-item="logistics" ><view class="num-name" data-index="{{index}}" bindtap="logToggle">运单编号：{{logistics.sn}}</view>`，`<view wx:if="{{logistics.toggle}}">这里是内容什么的-----</view>`；

---

2）：这个开关变量不是远程数据logisticsList里面就有的，须要咱们本身添加。logisticsList是一个包含若干对象的数组，每一个对象就是咱们要展现的数据，包括标题，具体内容之类的。如今给每一个对象添加toggle开关。
`

that.data.logisticsList.forEach(function(item){
        item.toggle = false
       })`

，这里的‘that’是什么？随便一个onShow或者onLoad函数里面的‘this’，--- var that = this;（这里能够直接用this，由于有时会用到回调函数，因此一向习惯用that代替this）。这一步仅仅给原始数据增长了属性，数据获得改变，但页面并不会显示效果，就是toggle不生效，内容没被隐藏。因此还需一步：

`that.setData({
    logisticsList: that.data.logisticsList
    })`；

---

3）：好了，如今页面就有标题了。来实现咱们的点击函数---logToggle，参数是寒碜的index。改变这个数组中某个对象的toggle属性,例如：logisticsList[0].toggle = false/true。然而，那个中括号里面的是变化的因此只好构造一个变化的字符串咯：
（相信这个确定是坑住了一部分人，获得启发的还不赶忙点赞！！！）
'logisticsList[' + index + '].toggle'，

`

logToggle:function(e){
   let index = e.currentTarget.dataset.index,
        nowToggle = this.data.logisticsList[index].toggle;
   this.setData({
        ['logisticsList[' + index + '].toggle']: !nowToggle
    })
 }`；

细心的同志会发现setData()函数里面传递的参数实际上是一个对象{}，因此你彻底能够在外部构造一个对象塞进去：`

logToggle:function(e){
//构造一个对象：param；设置要改变的参数：str；赋值 =
    let param = {};
    let index = e.currentTarget.dataset.index,
      nowToggle = this.data.logisticsList[index].toggle,
    str = 'logisticsList[' + index +'].toggle';
    param[str] = !nowToggle;
    this.setData(param)
  } `。

---

4)：测试结果：两种方法均可用，楼主选用构造对象（为避免受到520朋友圈的冲击，勉强作个防护）！

5）：本次分享缺憾是没有动画，闪现不友好。

---

结语：点击事件实现隐藏展示的实现方法极多，好比你能够作一个弹窗展现细节，点击弹窗隐藏则隐藏。方法多多，看需求构造。各位大神，小将的此次分享就到这里，欢迎指正！