欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?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)文章

最新評(píng)論