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