小程序實現列表展開收起效果
更新時間：2020年07月29日 14:51:14 作者：caroline_chen_CC
這篇文章主要為大家詳細介紹了小程序實現列表展開收起效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序實現列表展開收起的具體代碼，供大家參考，具體內容如下
效果：
原理：利用AppData值 + 顯示隱藏的樣式，進行展開收起。
wxml:
<view bindtap="toChange" data-show='isShow'>{{isShow?'收起':'展開'}}<view>
<view class="{{isShow?'db' : 'dn'}}">這是你要收起展開的內容</view>
js:
Page({\
data: {
isShow: true, //true為展開
},
/*
* isShow做取反操作
* */
toChange (e) {
let that = this;
let name = e.currentTarget.dataset.show;
let param = {};
param[name] = !that.data[name];
that.setData({
...param
})
},
})
wxss:
.db{
display:block;
}
.dn{
display:none;
}
這個原理其實夠正常的收起展開了，但是碰上列表，還需要調整一下，那么問題來了，如何讓小程序列表中展示明細？
列表效果：
想法：利用AppData值 + 顯示隱藏的樣式，進行展開收起。還要加上“數據污染”。
js：
page({
data:{
list:[{id:1},{id:2}],
},
toShowItem(e) {
let that = this;
let id = e.currentTarget.dataset.id,
show = e.currentTarget.dataset.show;
that.data.list.forEach(function (v) {
if (v.id == id) {
v.show = !show;//這里污染原始數組數據
}
})
//利用污染，對列表設置值
this.setData({
list: this.data.list
})
}
})
wxml：
<view wx:for="{{list}}" wx:key="{{index}}" wx:for-item="item">
<view bindtap="toShowItem" data-id='{{item.id}}' data-show='{{item.show}}'>
<text>{{item.show?'收起明細':'明細'}}</text>
</view>
<view class="{{item.show ? 'db' : 'dn'}}">
這里是你展開收起的內容
</view>
</view>
這里只是分享一個想法，要是想用直接粘貼，是達不到效果圖的效果的，畢竟不是所有的樣式都放上來了。
為大家推薦現在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
閉包（closure）是一個函數以及其捆綁的周邊環(huán)境狀態(tài)的引用的組合，就是讓開發(fā)者可以從內部函數訪問外部函數的作用域，下面下面小編就來和大家深入聊聊它的使用吧2023-07-07
這篇文章主要介紹了js 對象使用的小技巧,結合實例形式分析了JavaScript對象的遍歷、查找、事件監(jiān)聽等相關操作技巧,需要的朋友可以參考下2019-11-11
JS延遲加載,也就是等頁面加載完成之后再加載 JavaScript 文件,JS延遲加載有助于提高頁面加載速度,本文小編給大家介紹了JS延遲加載的幾種方式小結,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
ES6中Array.find()和findIndex()函數的用法詳解
ES6為Array增加了find()，findIndex函數。find()函數用來查找目標元素，找到就返回該元素，找不到返回undefined，而findIndex()函數也是查找目標元素，找到就返回元素的位置，找不到就返回-1。下面通過實例詳解，需要的朋友參考下吧2017-09-09
最近的項目需要添加一個分頁導航的功能,沒有用網上封裝好的文件,通過JS自己簡單實現了效果,這篇文章主要給大家介紹了關于javascript動態(tài)分頁的實現方法,需要的朋友可以參考下2022-06-06
JS使用oumousemove和oumouseout動態(tài)改變圖片顯示的方法
這篇文章主要介紹了JS使用oumousemove和oumouseout動態(tài)改變圖片顯示的方法,涉及javascript鼠標事件及圖片操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應該是抽象的，需要由具體的類去實現，然后第三方就可以通過這組抽象方法調用，讓具體的類執(zhí)行具體的方法，泛型是靜態(tài)類型語言的基本特征，允許將類型作為參數傳遞給另一個類型、函數、或者其他結構2022-10-10
圍住神經貓游戲是一款基于html5、jquery、typescript等技術開發(fā)的游戲，非常好玩，感興趣的朋友快來圍觀吧，體驗一把，下面給大家分享使用html5如何制作圍住神經貓游戲-附源碼下載，有需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了JavaScript面向對象實現貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
javascript firefox兼容ie的dom方法腳本
js firefox下兼容ie的dom的實現方法小結。利用我們?yōu)榱思嫒荻酁g覽器寫出更好的效果代碼2008-05-05