微信小程序 列表收起与展开效果

wxml

<view class="list" wx:for="{{list}}" wx:for-item="test" wx:key="Addtime">     
    <view class="list-date list-one">
        <view class="line-one">
          <text>身高：{{test.height}} CM</text>          
        </view>
        <view class="line-one">
          <text>体重：{{test.weight}} KG</text>
        </view>       
    </view>
     
    <view class="conts {{ list[index].isShow?'hide':''}}">
        <view class="list-date">
            <view class="line-one">
                <text>BMI：{{test.bmi}}</text>          
            </view>
            <view class="line-one">
                <text>体脂：{{test.bodyfat}}%</text>
            </view>       
        </view>
        <view class="list-date">
            <view class="line-one">
                <text>臀围：{{test.hipline}} CM</text>        
            </view>
            <view class="line-one">
                <text>胸围：{{test.bust}} CM</text>
            </view>       
        </view>
        <view class="list-date">
            <view class="line-one">
                <text>腰围：{{test.thewaist}} CM</text>          
            </view>
            <view class="line-one">
                <text>肩宽：{{test.shoulder}} CM</text>
            </view>       
        </view>
        <view class="list-date">
            <view class="line-one">
                <text>小腿围：{{test.minthigh}} CM</text>          
            </view>
            <view class="line-one">
                <text>大腿围：{{test.maxthigh}} CM</text>
            </view>       
        </view>
        <view class="list-date">
            <view class="line-con">
                <text>备注内容: {{test.info}}</text>          
            </view>    
        </view>
      </view>
      <view class="open-close">
        <text bindtap="show" data-index="{{index}}">{{ list[index].isShow? '收起︿' : '展开﹀'}}</text>
      </view>
    </view>

js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    showMore: {}, //每个订单中显示全部的详细情况
    isshow: false,
    list:[{height:180,weight:150,bmi:18,bodyfat:555,hipline:18,  bust:19, thewaist:20, shoulder:21, minthigh:22, maxthigh:33, info:44},
      {height:180,weight:150,bmi:18,bodyfat:555,hipline:18,  bust:19, thewaist:20, shoulder:21, minthigh:22, maxthigh:33, info:44}]
  },
 onShow(){
  let list = this.data.list
  list.map((item, index)=>{
    item.isShow = false
  })
  this.setData({
    list:list
  })
},
  /**
   * 展开、折叠效果
  */
  show: function (e) {
    let list = this.data.list
    let index = e.currentTarget.dataset.index
    list[index].isShow = !list[index].isShow
    this.setData({
      list: list
    })
  },
})

wxss

.conts {
  display: -webkit-box;
}
.hide {
  -webkit-box-orient: vertical;
}