微信小程序 - 展开收缩列表

代码源自于：微信小程序示例官方

index.wxml

 <block wx:for-items="{{list}}" wx:key="{{item.id}}">
   <view class="kind-list-item">
     <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
       <view class="kind-list-text">{{item.name}}</view>
     </view>
     <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
       <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
         <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
           <navigator url="pages/{{page}}/{{page}}" class="navigator">
             <view class="navigator-text">{{page}}</view>
             <!-- icon -->
             <view class="navigator-arrow"></view>
           </navigator>
         </block>
       </view>
     </view>
   </view>
 </block>

index.css

 .navigator-box {
   opacity:;
   position: relative;
   background-color: #fff;
   line-height: 1.41176471;
   font-size: 34rpx;
   transform: translateY(-50%);
   transition: 0.3s;
 }

 .navigator-box-show {
   opacity:;
   transform: translateY(0);
 }

 .navigator {
   padding: 20rpx 30rpx;
   position: relative;
   display: flex;
   align-items: center;
 }

 .navigator:before {
   content: " ";
   position: absolute;
   left: 30rpx;
   top:;
   right: 30rpx;
   height: 1px;
   border-top: 1rpx solid #d8d8d8;
   color: #d8d8d8;
 }

 .navigator:first-child:before {
   display: none;
 }

 .navigator-text {
   flex:;
 }

 .navigator-arrow {
   padding-right: 26rpx;
   position: relative;
 }

 .navigator-arrow:after {
   content: " ";
   display: inline-block;
   height: 18rpx;
   width: 18rpx;
   border-width: 2rpx 2rpx 0 0;
   border-color: #888;
   border-style: solid;
   transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
   position: absolute;
   top: 50%;
   margin-top: -8rpx;
   right: 28rpx;
 }

 .kind-list-item {
   margin: 20rpx 0;
   background-color: #fff;
   border-radius: 4rpx;
   overflow: hidden;
   border-bottom: 1px dashed #888;
 }

 .kind-list-item:first-child {
   margin-top:;
 }

 .kind-list-text {
   flex:;
 }

 .kind-list-img {
   width: 60rpx;
   height: 60rpx;
 }

 .kind-list-item-hd {
   padding: 30rpx;
   display: flex;
   align-items: center;
   transition: opacity 0.3s;
 }

 .kind-list-item-hd-show {
   opacity: 0.2;
 }

 .kind-list-item-bd {
   height:;
   overflow: hidden;
 }

 .kind-list-item-bd-show {
   height: auto;
 }

index.js

 Page({
     data: {
     list: [{
       id: 'view',
       name: '视图容器',
       open: false,
       pages: ['view', 'scroll-view', 'swiper', 'movable-view', 'cover-view']
     }, {
       id: 'content',
       name: '基础内容',
       open: false,
       pages: ['text', 'icon', 'progress', 'rich-text']
     }, {
       id: 'form',
       name: '表单组件',
       open: false,
       pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio', 'slider', 'switch', 'textarea']
     }, {
       id: 'nav',
       name: '导航',
       open: false,
       pages: ['navigator']
     }, {
       id: 'media',
       name: '媒体组件',
       open: false,
       pages: ['image', 'audio', 'video', 'camera']
     }, {
       id: 'map',
       name: '地图',
       pages: ['map']
     }, {
       id: 'canvas',
       name: '画布',
       pages: ['canvas']
     }, {
       id: 'open',
       name: '开放能力',
       pages: ['ad', 'open-data', 'web-view']
     }]
   },

   /**
    * 收缩核心代码
    */
   kindToggle(e) {
     const id = e.currentTarget.id
     const list = this.data.list
     for (let i = 0, len = list.length; i < len; ++i) {
       if (list[i].id === id) {
         list[i].open = !list[i].open
       } else {
         list[i].open = false
       }
     }

     /**
      * key和value名称一样时，可以省略
      *
      * list:list=>list
      */
     this.setData({
       list
     })
   }
 })

点击下载源码：示例-小程序展开收缩列表