小程序查看更多功能

wxml:

<view class="point_top">
    <view class="weui-cells mgt-0 {{!showMore? 'hiddenmore' : 'showmore'}}">
      <view class="applist"  wx:for="{{pointList}}" wx:for-index="idx"  class="weui-cell {{idx>1 ? 'more-item' : ''}}" wx:for-item="item" wx:key="index">
        <view class="small_box point_box" bindtap="change"  data-index='{{item.point}}' >
          <view> {{item.point}}</view>
          <view> {{item.pointName}}</view>
          <view> {{item.pointValue}}{{item.pointUnit}}</view>
          <view> {{item.lastUpdateTime}}</view>
        </view>
      </view>
    </view>
    <block wx:if="{{pointList.length>2}}">
      <view wx:if="{{showMore}}" class='fs-30 text-center pd10-15 fc-blue' bindtap='listToggle'>
        收起
        <icon class="shishuofont icon-list-close"></icon>
      </view>
      <view wx:else class='fs-30 text-center pd10-15 fc-blue' bindtap='listToggle'>
        查看更多
        <icon class="shishuofont icon-list-open"></icon>
      </view>
    </block> 
    </view>

wxss:

.hiddenmore .more-item {
  display: none;
}
 .weui-cell{
   display: inline-block;
 }
.showmore .more-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  display: inline-block;
}
.fc-blue{
  color: rgb(4, 115, 156);
  text-align: center;
  padding-bottom: 40rpx;
}

js:

data: {
    showMore: false,
    pointList:[{
      point: "1",
      pointValue: 6.74,
      pointUnit: "元",
      pointName: "大熊猫",
      lastUpdateTime: "2020-08-22 18:07:12"
    },{
      point: "1",
      pointValue: 6.74,
      pointUnit: "元",
      pointName: "大熊猫",
      lastUpdateTime: "2020-08-22 18:07:12"
    },{
      point: "1",
      pointValue: 6.74,
      pointUnit: "元",
      pointName: "大熊猫",
      lastUpdateTime: "2020-08-22 18:07:12"
    },{
      point: "1",
      pointValue: 6.74,
      pointUnit: "元",
      pointName: "大熊猫",
      lastUpdateTime: "2020-08-22 18:07:12"
    },{
      point: "1",
      pointValue: 6.74,
      pointUnit: "元",
      pointName: "大熊猫",
      lastUpdateTime: "2020-08-22 18:07:12"
    },
  ]
},
 listToggle: function () {
    this.setData({
      showMore: !this.data.showMore
    })
  },