background

Whether in applets or H5 web pages, folding menu, accordion is a very common effect, now there are many ready-made UI component libraries have implemented this effect, but sometimes when writing native applets, just a folding menu effect, but to introduce the entire UI library, a bit more than the gain

The following is a manual implementation of their own

Effect of instance

Nuggets do not support GIfs, see link – accordion for full example effect

The specific implementation

Here is the sample WXML code

<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> Copy the code

Here is the WXSS sample code

.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.5 s ease;  text-indent: 40rpx;  display: block; }  .hidden-content { // The main use isdisplay: None implements hiding display: none; } Copy the code

The following is the logic code for folding the menu

Page({
  / * ** Initial data for the page* /
  data: {
 selected: [false.false.false.false.false].// // indicates whether the list items are expanded. By default, all elements of this array are fasle, indicating that none of them are expanded  active: null.// The index value of the currently expanded item  listDatas: [  {  list_name: 'introduction'. list_content:  'A handsome young man from the 90s in the front row, a craftsman with feelings, a practitioner of the slash youth on the road'. },   {  list_name: 'Developer'. list_content: 'Essay Trail'. },   {  list_name: 'WeChat ID'. list_content: 'suibichuanji'. },   {  list_name: 'wechat Official Account'. list_content: 'itclanCoder'. },   {  list_name: 'Other Business'. list_content:  'Advertising copy planning and writing/short video production (special effects, post-video processing)/ dubbing/agent operation of public account'. }, ]. },   / * ** Lifecycle functions -- listen for page loads* /  onLoad: function(options) {},   // Click the list, shrink and show  onListClick(event) {  let index = event.currentTarget.dataset.index;  let active = this.data.active;   this.setData({  [`selected[${index}] `]: !this.data.selected[`${index}`]. active: index,  });   // If you click on something other than the currently expanded item, close the currently expanded item  // Click on one item and hide the other  if(active ! = =null&& active ! == index) { this.setData({  [`selected[${active}] `] :false. });  }  }, }); Copy the code

The accordion effect is achieved by using display: None in the CSS, with some of the suboptions hidden by default, and then placing the names of the list data and the contents to be displayed in an array of listDatas, followed by a loop of list rendering

Bind the click event in the list, set the data attribute on the element, and it can be obtained in the event object. Finally, modify the data through setData to achieve the accordion effect

conclusion

How to display and hide the selected state of a subitem list through the index of the selected state