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