微信小程序?qū)崿F(xiàn)手風(fēng)琴折疊面板
更新時間：2022年05月23日 09:23:53 作者：gyuei
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手風(fēng)琴折疊面板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)手風(fēng)琴折疊面板的具體代碼，供大家參考，具體內(nèi)容如下
目的：折疊面板默認(rèn)顯示其中一項，利用toggle實現(xiàn)元素的顯示和隱藏
例如：頁面中有四個可折疊元素，默認(rèn)元素1顯示，其余項目內(nèi)容隱藏；當(dāng)點擊元素2時，元素2顯示，其余項目內(nèi)容隱藏。
初始效果如圖：
1.wxml部分代碼如下：
<view class='item' wx:for="{{items}}" wx:key="index">
?? ?<view class='title' data-index="{{index}}" bindtap='panel'>
?? ??? ?{{item.title}}
?? ?</view>
?? ?<view class='detail' wx:if="{{showIndex == index}}">{{item.text}}</view>
</view>2.js部分代碼如下：
Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? showIndex: 0, //默認(rèn)第一個項目顯示
? ? items: [{
? ? ? title: '折疊項目1',
? ? ? text: '項目1的內(nèi)容'
? ? }, {
? ? ? title: '折疊項目2',
? ? ? text: '項目2的內(nèi)容',
? ? }, {
? ? ? title: '折疊項目3',
? ? ? text: '項目3的內(nèi)容',
? ? }]
? },
? panel: function (e) {
? ? console.log(this.data)
? ? //獲取到當(dāng)前點擊元素的下標(biāo)
? ? let index = e.currentTarget.dataset.index;
? ? //當(dāng)前顯示隱藏內(nèi)容的元素
? ? let showIndex = this.data.showIndex;
? ? if (index != showIndex) {
? ? ? this.setData({
? ? ? ? showIndex: index
? ? ? })
? ? } else {
? ? ? this.setData({
? ? ? ? showIndex: 0
? ? ? })
? ? }
? },
})3.css部分代碼如下：
.item {
? margin: 10rpx auto;
}
?.item .title {
? font-size: 30rpx;
? height: 60rpx;
? line-height: 60rpx;
? background: #f2f2f2;
? display: flex;
}
.item .detail {
? margin: 10rpx auto;
? font-size: 25rpx;
? line-height: 40rpx;
? text-indent: 2em;
}最終效果如圖所示：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)兼容各種瀏覽器的高級拖動方法完整實例【測試可用】
這篇文章主要介紹了JS實現(xiàn)兼容各種瀏覽器的高級拖動方法,以完整實例形式分析了JS實現(xiàn)響應(yīng)鼠標(biāo)事件動態(tài)修改頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
提到在一段程序中如果碰到需要終止,結(jié)束一個循環(huán),函數(shù)或者一段代碼,一般會想到以下這幾個關(guān)鍵字return、continue、break,這篇文章主要給大家介紹了關(guān)于js中幾種循環(huán)的退出方式,需要的朋友可以參考下2022-12-12
這篇文章主要源碼解讀了Bootstrap模態(tài)彈出框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JS實現(xiàn)點擊鏈接取消跳轉(zhuǎn)效果的方法
有時候我們僅僅希望將鏈接<a>作為一個按鈕使用，但是在默認(rèn)狀態(tài)下，點擊鏈接會出現(xiàn)跳轉(zhuǎn)效果，下面就通過代碼實例，介紹一下如何實現(xiàn)此效果2014-01-01
這篇文章主要介紹了Webpack的Loader和Plugin的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了基于JavaScript實現(xiàn)單例模式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
AjaxFileUpload.js實現(xiàn)異步上傳文件功能
這篇文章主要為大家詳細(xì)介紹了AjaxFileUpload.js實現(xiàn)異步上傳文件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04
微信公眾號平臺接口開發(fā) 獲取access_token過程解析
這篇文章主要介紹了微信公眾號平臺接口開發(fā) 獲取access_token過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
廢話少說，直接上Code,對IE與FF下的差異，均在代碼中有相關(guān)的注解2010-03-03
這篇文章主要介紹了JS查找數(shù)組中重復(fù)元素的方法,結(jié)合具體實例形式對比分析了javascript針對數(shù)組的遍歷、判斷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-06-06