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

微信小程序實現(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ù)據
? ?*/
? 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;
}

最終效果如圖所示：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論