小程序 toggle ，列表的展現(xiàn)和隱藏

harryhappy 發(fā)布于2019-08-20 16:41 / 2065人閱讀

摘要：截止到目前，小程序還未提供良好的功能。在開發(fā)的時候，自己做了一個簡單的實現(xiàn)。實現(xiàn)獲取數(shù)據(jù)后，只展現(xiàn)標題，把詳情隱藏起來。這一步僅僅給原始數(shù)據(jù)增加了屬性，數(shù)據(jù)得到改變，但頁面并不會顯示效果，就是不生效，內容沒被隱藏。

截止到目前（2017-5-19），小程序還未提供良好的toggle功能。在開發(fā)的時候，自己做了一個簡單的實現(xiàn)。其中還遇到了一些其他的小麻煩，這里與大家探討：

情景：從遠端獲取數(shù)據(jù)，在小程序界面展現(xiàn)標題列表，點擊標題查看詳情。

實現(xiàn)
1）：獲取數(shù)據(jù)后，只展現(xiàn)標題，把詳情隱藏起來。顯然這里需要增加一個開關，標題增加一個點擊事件，控制詳情展現(xiàn)：

`運單編號：{{logistics.sn}}`，`這里是內容什么的-----`；

2）：這個開關變量不是遠程數(shù)據(jù)logisticsList里面就有的，需要我們自己添加。logisticsList是一個包含若干對象的數(shù)組，每個對象就是我們要展示的數(shù)據(jù)，包括標題，具體內容之類的。現(xiàn)在給每個對象添加toggle開關。
`

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

，這里的‘that’是什么？隨便一個onShow或者onLoad函數(shù)里面的‘this’，--- var that = this;（這里可以直接用this，因為有時會用到回調函數(shù)，所以一貫習慣用that代替this）。這一步僅僅給原始數(shù)據(jù)增加了屬性，數(shù)據(jù)得到改變，但頁面并不會顯示效果，就是toggle不生效，內容沒被隱藏。所以還需一步：

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

3）：好了，現(xiàn)在頁面就有標題了。來實現(xiàn)我們的點擊函數(shù)---logToggle，參數(shù)是寒磣的index。改變這個數(shù)組中某個對象的toggle屬性,例如：logisticsList[0].toggle = false/true。然而，那個中括號里面的是變化的所以只好構造一個變化的字符串咯：
（相信這個肯定是坑住了一部分人，得到啟發(fā)的還不趕緊點贊！！！）
"logisticsList[" + index + "].toggle"，

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

細心的同志會發(fā)現(xiàn)setData()函數(shù)里面?zhèn)鬟f的參數(shù)其實是一個對象{}，所以你完全可以在外部構造一個對象塞進去：`

logToggle:function(e){
//構造一個對象：param；設置要改變的參數(shù)：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）：本次分享缺憾是沒有動畫，閃現(xiàn)不友好。

結語：點擊事件實現(xiàn)隱藏展現(xiàn)的實現(xiàn)方法極多，比如你可以做一個彈窗展示細節(jié)，點擊彈窗隱藏則隱藏。方法多多，看需求構造。各位大神，小將的這次分享就到這里，歡迎指正！

GPU云服務器云服務器個人小程序和公司小程序的區(qū)別小程序的開發(fā)和發(fā)布小程序和公眾號的區(qū)別微信小程序和云服務器溝通

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83086.html

ES6-Generator與react狀態(tài)機（13）

摘要：同理，你只要知道改變狀態(tài)能夠實現(xiàn)要的功能，大體上的原理就是狀態(tài)機就可以了。總結，本文重點狀態(tài)機模式的使用場景，復雜多狀態(tài)的管理，這里注意你沒必要寫個選項卡之類的用狀態(tài)機，那反而是給自己找麻煩。大家在寫App和一些單頁面程序的時候，經常會遇到這樣的情況：showImg(https://segmentfault.com/img/bVbsNaA?w=240&h=427);當點擊左邊的箭頭的...

alphahans 2019-08-26 13:49 評論0 收藏0
React-Redux小應用（一）-React_Redux_Appointment

摘要：先來一波硬廣我的博客歡迎觀光傳送門這個小應用使用創(chuàng)建演示地址，地址。這是之前的的版，之前的演示，改寫自的課程。 React-Redux-Appointment 先來一波硬廣：我的博客歡迎觀光：傳送門這個小應用使用Create React App創(chuàng)建,演示地址:https://liliang-cn.github.io/react_redux_appointment，repo地址：http...

CoorChice 2019-08-21 11:22 評論0 收藏0
純CSS實現(xiàn)點擊事件展現(xiàn)隱藏div菜單列表/元素切換

摘要：在寫移動端導航的時候經常用到點擊按鈕出現(xiàn)隱藏導航條的情況，最常見的方法當然還是前端框架直接調用，省心省力，不易出錯當然還有使用純實現(xiàn)的小代碼段。另外使用作為選擇器僅為了兼容更低版本的在寫移動端導航的時候經常用到點擊按鈕出現(xiàn)/隱藏導航條的情況，最常見的方法當然還是前端框架直接調用，省心省力，不易出錯；當然還有使用純JS實現(xiàn)的小代碼段。我這里整理了純CSS實現(xiàn)方式，給需要的人和給自己做個筆記： ...

番茄西紅柿 2019-04-23 11:50 評論0 收藏0
微信小程序的按鈕toogle效果

摘要：但是我們又要實現(xiàn)，連續(xù)點擊兩次同一個按鈕時，這個一級菜單有效果，如果像上面那樣把恢復初始值，就不能實現(xiàn)效果。這時的兩個數(shù)組的完全獨立的。創(chuàng)建一個公用的導航navBar組件，讓它可以在所有頁面使用，比如在index.wxml,引用navBar組件，方法如下 1.在需要引用組件的頁面中的json中定義這個組件 //index.json { usingComponents: { ...

Seay 2019-08-22 16:57 評論0 收藏0
React Motion 緩動函數(shù)剖析

摘要：大家可以嘗試使用的，配置一個合適的勁度系數(shù)和空氣阻力。所做的事，只不過自己實現(xiàn)了一套緩動函數(shù)。根據(jù)經典力學的觀點，世界上所有的原子每時每刻仿佛都會根據(jù)當前速度、受力和位置計算出下一刻的速度、受力和位置。上帝有一臺超級計算機嗎？非也，反而計算機是我們利用原子的這些特性拼裝出來的。現(xiàn)在，我們卻要用計算機，像上帝那樣，再造一個世界。我不知道這個世界上有沒有仿世學，但是既然動畫是要模仿現(xiàn)實...

wfc_666 2019-08-19 17:18 評論0 收藏0