示例

阿斯蒂芬.gif

wxml:

<view class="wrap">  <view class="item" wx:for="{{allList}}" wx:key="index">    <view class="h1" bindtap="change" data-i="{{index}}">日期 {{item.date}}</view>    <view class="todolist">      <view class="{{item.status ? 'td-box-show' : 'td-box-hide' }}">        <view wx:for="{{item.list}}" wx:for-item="desItem" wx:for-key="dexIndex" wx:key="dexIndex" class="td-item">{{desItem}}</view>      </view>    </view>   </view>  <view wx:for="{{num}}" wx:key="index" style="height:50rpx;color:#000;">{{item}}</view></view>

css:

.wrap {  padding: 0 20rpx;}.item {  height: auto;  overflow: hidden;  position: relative;}.todolist {  padding-top: 30rpx;  height: auto;  overflow: hidden;  position: relative;}.td-item {  position: relative;  transform: translateY(-50%);  transition: 0.3s;}.td-box-hide {  height: 0;  position: relative;  transform: translateY(-50%);  transition: 0.3s;  overflow: hidden;}.td-box-show {  transition: 0.3s;  opacity: 1;  transform: translateY(0);}

js:

 data: {    num: [],    prveIndex: -1,    allList: [{      status: false,      date: '2020-03-09',      list: ['买票', '吃饭', '玩', '游泳', '爬山']    }, {      status: false,      date: '2020-03-09',      list: ['买票', '吃饭', '玩', '游泳', '爬山']    }, ]  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {    for (let i = 0; i < 1000; i++) {      let num = this.data.num;      num.push(i)      this.setData({        num      })    }  },  change(e) {    let i = e.currentTarget.dataset.i;    let currentItem = 'allList[' + i + '].status';    if (this.data.prveIndex == -1) {      //上一个不存在，显示当前      this.setData({        [currentItem]: !this.data.allList[i].status,        prveIndex: i      })    } else if (i == this.data.prveIndex) {      // 重复点击同一个的时候      this.setData({        [currentItem]: !this.data.allList[i].status,      })    } else {      // 如果上一个存在 就关闭上一个 显示当前      let prveItem = 'allList[' + this.data.prveIndex + '].status';      this.setData({        [currentItem]: !this.data.allList[i].status,        [prveItem]: false,        prveIndex: i      })    }  },

原著是一个有趣的人,若有侵权,请通知删除