小程序-實現(xiàn)折疊面板-手風琴效果

發(fā)表時間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：60

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

具體實現(xiàn)

如下是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`示例代碼

如下是折疊菜單邏輯代碼

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    selected: [false, false, false, false, false], // // 這里表示列表項是否展開，默認初始時此數(shù)組的元素全為fasle，表示都沒展開
    active: null, // 當前展開的項的index值
    listDatas: [
      {
        list_name: '簡介',
        list_content:
          '一個靠前排的90后帥小伙,具有情懷的技匠,路上正追逐斜杠青年的踐行者',
      },

      {
        list_name: '開發(fā)者',
        list_content: '隨筆川跡',
      },

      {
        list_name: '微信ID',
        list_content: 'suibichuanji',
      },

      {
        list_name: '微信公眾號',
        list_content: 'itclanCoder',
      },

      {
        list_name: '其他業(yè)務',
        list_content:
          '廣告文案策劃編寫/短視頻制作(特效,后期視頻處理)/配音/公眾號代運營',
      },
    ],
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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,
    });

    // 如果點擊的不是當前展開的項，則關閉當前展開的項
    // 這里就實現(xiàn)了點擊一項，隱藏另一項
    if (active !== null && active !== index) {
      this.setData({
        [`selected[${active}]`]: false,
      });
    }
  },
});