小程序下拉列表

示例

阿斯蒂芬.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
      })
    }
  },