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

 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             
12             <view class="navigator-arrow">view>
13           navigator>
14         block>
15       view>
16     view>
17   view>
18 block>

 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 }

 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 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 })