小程序 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）：本次分享缺憾是沒有動畫，閃現不友好。

---

結語：點擊事件實現隱藏展示的實現方法極多，好比你能夠作一個彈窗展現細節，點擊彈窗隱藏則隱藏。方法多多，看需求構造。各位大神，小將的此次分享就到這裏，歡迎指正！