技術標籤：h5 手風琴效果

背景

無論是在小程式還是 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>
        <iconfont
          class="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的狀態,實現子項列表內容的顯示和隱藏