背景

無論是在小程序還是 h5 網頁,折疊菜單,手風琴是一個非常常見的效果,如今也有很多現成的 UI 組件庫已經實現了這一效果的,但有時候在寫原生小程序時,單單就是一個折疊菜單效果,卻要引入整個 UI 庫,有點得不償失

以下就自己手動實現一個的

實例效果

具體實現

如下是wxml示例代碼

<view class="content"><block wx:for="{{ listDatas }}" wx:key="index"><view class="list-content" bindtap="onListClick" data-index="{{ index }}"><view><text>{{ item.list_name }}</text></view><view><iconfontclass="iconfont {{selected[index] ? 'icon-arrow-down' : 'icon-right'}}"></iconfont></view></view><view class="list-text {{selected[index] ? '' : 'hidden-content'}}"><view><text selectable="true">{{ item.list_content }}</text></view></view></block> </view>

如下是wxss示例代碼

.content {padding: 15rpx 15rpx 0 15rpx;font-size: 30rpx;color: #808080; }.list-content {display: flex;justify-content: space-between;text-align: center;line-height: 60rpx;border-bottom: 1rpx solid #ddd; }.list-text {padding-top: 15rpx;transition: all 0.5s ease;text-indent: 40rpx;display: block; }.hidden-content {// 主要利用的是display:none實現隱藏display: none; }

如下是折疊菜單邏輯代碼

Page({/*** 頁面的初始數據*/data: {selected: [false, false, false, false, false], // // 這里表示列表項是否展開，默認初始時此數組的元素全為fasle，表示都沒展開active: null, // 當前展開的項的index值listDatas: [{list_name: '簡介',list_content:'一個靠前排的90后帥小伙,具有情懷的技匠,路上正追逐斜杠青年的踐行者',},{list_name: '開發者',list_content: '隨筆川跡',},{list_name: '微信ID',list_content: 'suibichuanji',},{list_name: '微信公眾號',list_content: 'itclanCoder',},{list_name: '其他業務',list_content:'廣告文案策劃編寫/短視頻制作(特效,后期視頻處理)/配音/公眾號代運營',},],},/*** 生命周期函數--監聽頁面加載*/onLoad: function(options) {},// 點擊列表,收縮與展示onListClick(event) {let index = event.currentTarget.dataset.index;let active = this.data.active;this.setData({[`selected[${index}]`]: !this.data.selected[`${index}`],active: index,});// 如果點擊的不是當前展開的項，則關閉當前展開的項// 這里就實現了點擊一項，隱藏另一項if (active !== null && active !== index) {this.setData({[`selected[${active}]`]: false,});}}, });

如上代碼就可以實現手風琴的效果,主要利用的是css中的display:none,默認的一些子選項是隱藏的,然后列表的數據的名稱以及要展示的內容放在一個數組listDatas中,隨后,循環列表渲染

在列表中綁定點擊事件,在元素上設置data屬性,在事件對象中就可以獲取到,最終通過setData修改數據,以達到實現手風琴的效果

結語

實現這個手風琴,主要還是在怎么控制子選項的一個狀態selected,通過列表的索引,然后進行控制selected的狀態,實現子項列表內容的顯示和隱藏

總結

以上是生活随笔為你收集整理的h5 手风琴效果_小程序-实现折叠面板-手风琴效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。