小程序?qū)崿F(xiàn)列表展開收起效果
更新時間：2020年07月29日 14:51:14 作者：caroline_chen_CC
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)列表展開收起效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序?qū)崿F(xiàn)列表展開收起的具體代碼，供大家參考，具體內(nèi)容如下
效果：
原理：利用AppData值 + 顯示隱藏的樣式，進行展開收起。
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;
}
這個原理其實夠正常的收起展開了，但是碰上列表，還需要調(diào)整一下，那么問題來了，如何讓小程序列表中展示明細？
列表效果：
想法：利用AppData值 + 顯示隱藏的樣式，進行展開收起。還要加上“數(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?'收起明細':'明細'}}</text>
</view>
<view class="{{item.show ? 'db' : 'dn'}}">
這里是你展開收起的內(nèi)容
</view>
</view>
這里只是分享一個想法，要是想用直接粘貼，是達不到效果圖的效果的，畢竟不是所有的樣式都放上來了。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS中用childNodes獲取子元素換行會產(chǎn)生一個子元素
本文給大家分享JS中用childNodes獲取子元素換行會產(chǎn)生一個子元素的實例代碼，需要的朋友參考下2016-12-12
這篇文章主要介紹了JavaScript中的ubound函數(shù)使用實例,本文先是講解了ubound函數(shù)的語法,然后給出了用法代碼實例,需要的朋友可以參考下2014-11-11
最近學(xué)到了數(shù)組的使用方法,給大家分享一下,這篇文章主要給大家介紹了關(guān)于js數(shù)組反轉(zhuǎn)的幾種常見方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
javascript實現(xiàn)劃詞標(biāo)記+劃詞搜索功能
javascript實現(xiàn)劃詞標(biāo)記+劃詞搜索功能...2007-03-03
一個效果寫的HashTable代碼...2007-03-03
bootstrap動態(tài)添加面包屑(breadcrumb)及其響應(yīng)事件的方法
這篇文章主要介紹了bootstrap動態(tài)添加面包屑(breadcrumb)及其響應(yīng)事件的方法,涉及js數(shù)據(jù)傳輸及定義響應(yīng)事件相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細介紹了微信小程序用canvas畫圖，并實現(xiàn)分享功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
JS基于FileSystemObject創(chuàng)建一個指定路徑的TXT文本文件
這篇文章主要介紹了JS基于FileSystemObject創(chuàng)建一個指定路徑的TXT文本文件,涉及javascript使用ActiveXObject控件中FileSystemObject對象模型的基本技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
利用JavaScript實現(xiàn)棧的數(shù)據(jù)結(jié)構(gòu)示例代碼
棧（stack）又名堆棧，它是一種運算受限的線性表，下面這篇文章主要給大家介紹了關(guān)于利用JavaScript實現(xiàn)棧的數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
本文介紹了如何自定義trim方法，trim的作用就是去除字符串前后空格,這個方法在字符串處理方面很有實用價值，需要的朋友可以參考下2015-07-07