微信小程序實現(xiàn)手風琴折疊面板
更新時間：2022年05月23日 09:23:53 作者：gyuei
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)手風琴折疊面板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)手風琴折疊面板的具體代碼，供大家參考，具體內容如下
目的：折疊面板默認顯示其中一項，利用toggle實現(xiàn)元素的顯示和隱藏
例如：頁面中有四個可折疊元素，默認元素1顯示，其余項目內容隱藏；當點擊元素2時，元素2顯示，其余項目內容隱藏。
初始效果如圖：
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, //默認第一個項目顯示
? ? items: [{
? ? ? title: '折疊項目1',
? ? ? text: '項目1的內容'
? ? }, {
? ? ? title: '折疊項目2',
? ? ? text: '項目2的內容',
? ? }, {
? ? ? title: '折疊項目3',
? ? ? text: '項目3的內容',
? ? }]
? },
? panel: function (e) {
? ? console.log(this.data)
? ? //獲取到當前點擊元素的下標
? ? let index = e.currentTarget.dataset.index;
? ? //當前顯示隱藏內容的元素
? ? 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;
}最終效果如圖所示：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家?guī)硪黄猨s判斷是否為空和typeof的用法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家介紹了Sourcemap源代碼映射介紹及示例詳解解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-04-04
本文通過一段實例代碼給大家介紹了基于js實現(xiàn)點擊按鈕可編輯效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的的朋友參考下吧2018-07-07
關于js獲取flash對象，網上有非常多的例子，但不是我想要的，經測試整理，因此本文誕生了2014-04-04
這篇文章主要介紹了JS判斷頁面是手機端還是在PC端打開的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
下面小編就為大家?guī)硪黄袹avaScript代碼改成ES6語法不完全指南(分享)。小編覺得挺不錯的，現(xiàn)在就想給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了JS前端組件設計以業(yè)務為導向實踐思考，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了JavaScript的表達式與運算符，需要的朋友可以參考下2015-11-11
利用HTML與JavaScript實現(xiàn)注冊頁面源碼
這篇文章主要給大家介紹了關于利用HTML與JavaScript實現(xiàn)注冊頁面的相關資料,文中通過代碼介紹的非常詳細,對大家實現(xiàn)注冊頁面具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇基于bootstrap頁面渲染的問題解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08