小程序-实现折叠面板-手风琴效果

发表时间：2021-1-5

发布人：葵宇科技

浏览次数：42

无论是在小程序还是 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`示例代码

如下是折叠菜单逻辑代码

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,
      });
    }
  },
});