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

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

 

 

 

 

index.wxml

 1 <block wx:for-items="{{list}}" wx:key="{{item.id}}">
 2   <view class="kind-list-item">
 3     <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
 4       <view class="kind-list-text">{{item.name}}</view>
 5     </view>
 6     <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
 7       <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
 8         <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
 9           <navigator url="pages/{{page}}/{{page}}" class="navigator">
10             <view class="navigator-text">{{page}}</view>
11             <!-- icon -->
12             <view class="navigator-arrow"></view>
13           </navigator>
14         </block>
15       </view>
16     </view>
17   </view>
18 </block>

 

index.css

  1 .navigator-box {
  2   opacity: 0;
  3   position: relative;
  4   background-color: #fff;
  5   line-height: 1.41176471;
  6   font-size: 34rpx;
  7   transform: translateY(-50%);
  8   transition: 0.3s;
  9 }
 10 
 11 .navigator-box-show {
 12   opacity: 1;
 13   transform: translateY(0);
 14 }
 15 
 16 .navigator {
 17   padding: 20rpx 30rpx;
 18   position: relative;
 19   display: flex;
 20   align-items: center;
 21 }
 22 
 23 .navigator:before {
 24   content: " ";
 25   position: absolute;
 26   left: 30rpx;
 27   top: 0;
 28   right: 30rpx;
 29   height: 1px;
 30   border-top: 1rpx solid #d8d8d8;
 31   color: #d8d8d8;
 32 }
 33 
 34 .navigator:first-child:before {
 35   display: none;
 36 }
 37 
 38 .navigator-text {
 39   flex: 1;
 40 }
 41 
 42 .navigator-arrow {
 43   padding-right: 26rpx;
 44   position: relative;
 45 }
 46 
 47 .navigator-arrow:after {
 48   content: " ";
 49   display: inline-block;
 50   height: 18rpx;
 51   width: 18rpx;
 52   border-width: 2rpx 2rpx 0 0;
 53   border-color: #888;
 54   border-style: solid;
 55   transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
 56   position: absolute;
 57   top: 50%;
 58   margin-top: -8rpx;
 59   right: 28rpx;
 60 }
 61 
 62 .kind-list-item {
 63   margin: 20rpx 0;
 64   background-color: #fff;
 65   border-radius: 4rpx;
 66   overflow: hidden;
 67   border-bottom: 1px dashed #888;
 68 }
 69 
 70 .kind-list-item:first-child {
 71   margin-top: 0;
 72 }
 73 
 74 .kind-list-text {
 75   flex: 1;
 76 }
 77 
 78 .kind-list-img {
 79   width: 60rpx;
 80   height: 60rpx;
 81 }
 82 
 83 .kind-list-item-hd {
 84   padding: 30rpx;
 85   display: flex;
 86   align-items: center;
 87   transition: opacity 0.3s;
 88 }
 89 
 90 .kind-list-item-hd-show {
 91   opacity: 0.2;
 92 }
 93 
 94 .kind-list-item-bd {
 95   height: 0;
 96   overflow: hidden;
 97 }
 98 
 99 .kind-list-item-bd-show {
100   height: auto;
101 }

 

index.js

 1 Page({
 2     data: {
 3     list: [{
 4       id: 'view',
 5       name: '视图容器',
 6       open: false,
 7       pages: ['view', 'scroll-view', 'swiper', 'movable-view', 'cover-view']
 8     }, {
 9       id: 'content',
10       name: '基础内容',
11       open: false,
12       pages: ['text', 'icon', 'progress', 'rich-text']
13     }, {
14       id: 'form',
15       name: '表单组件',
16       open: false,
17       pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio', 'slider', 'switch', 'textarea']
18     }, {
19       id: 'nav',
20       name: '导航',
21       open: false,
22       pages: ['navigator']
23     }, {
24       id: 'media',
25       name: '媒体组件',
26       open: false,
27       pages: ['image', 'audio', 'video', 'camera']
28     }, {
29       id: 'map',
30       name: '地图',
31       pages: ['map']
32     }, {
33       id: 'canvas',
34       name: '画布',
35       pages: ['canvas']
36     }, {
37       id: 'open',
38       name: '开放能力',
39       pages: ['ad', 'open-data', 'web-view']
40     }]
41   },
42 
43   /**
44    * 收缩核心代码
45    */
46   kindToggle(e) {
47     const id = e.currentTarget.id
48     const list = this.data.list
49     for (let i = 0, len = list.length; i < len; ++i) {
50       if (list[i].id === id) {
51         list[i].open = !list[i].open
52       } else {
53         list[i].open = false
54       }
55     }
56 
57     /**
58      * key和value名称一样时，可以省略
59      * 
60      * list:list=>list
61      */
62     this.setData({
63       list
64     })
65   }
66 })

 

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