关于javascript:小程序实现折叠面板手风琴效果

9次阅读

共计 3942 个字符，预计需要花费 10 分钟才能阅读完成。

背景

无论是在小程序还是 h5 网页, 折叠菜单, 手风琴是一个十分常见的成果, 现在也有很多现成的 UI 组件库曾经实现了这一成果的, 但有时候在写原生小程序时, 单单就是一个折叠菜单成果, 却要引入整个 UI 库, 有点得失相当

以下就本人手动实现一个的

实例成果

## 背景

无论是在小程序还是 h5 网页, 折叠菜单, 手风琴是一个十分常见的成果, 现在也有很多现成的 UI 组件库曾经实现了这一成果的, 但有时候在写原生小程序时, 单单就是一个折叠菜单成果, 却要引入整个 UI 库, 有点得失相当

以下就本人手动实现一个的

实例成果

掘金不反对 gif 图，残缺示例成果见链接 - 手风琴

具体实现

如下是 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 的状态, 实现子项列表内容的显示和暗藏

具体实现

如下是 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 的状态, 实现子项列表内容的显示和暗藏

原文出处 https://coder.itclan.cn/- 小程序 - 实现折叠面板 - 手风琴成果

正文完
javascript
发表至： javascript
2020-10-16
 0
关于javascript:Docker-实战教程之从入门到提高-四
关于javascript:在线教育行业不可不知的阿里云中间件实战秘笈
vue-总结
关于javascript:一些JS概念