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

背景

无论是在小程序还是 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的状态,实现子项列表内容的显示和暗藏