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

柔光的暖阳◎ 2022-03-27 14:12 694阅读 0赞

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

![1060535-20180930151520057-273280452.gif][]

![1060535-20180930152050246-1078402725.png][]

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

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

[1060535-20180930151520057-273280452.gif]: /images/20220327/7136d092b8814a12938e9e56b75ac3ce.png
[1060535-20180930152050246-1078402725.png]: /images/20220327/97aab7c359304f0c85559c5905af02c3.png
[-]: https://www.playsort.cn/%E5%B0%8F%E7%A8%8B%E5%BA%8F-%E5%B1%95%E5%BC%80%E6%94%B6%E7%BC%A9.zip