背景
無論是在小程序還是 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的狀態,實現子項列表內容的顯示和隱藏
![poj 3728 Catch That Cow （[kuangbin帶你飛]專題一 簡單搜索）](http://pic.xiahunao.cn/poj 3728 Catch That Cow （[kuangbin帶你飛]專題一 簡單搜索）)
