for循环新增 / 删除picker日期组件

循环列表出来的时间选择器，可以新增和删除。

1，效果图

2，布局

<view wx:for="{{selectTime}}">
    <view class="time_bor {{index > 0 ? 'm-top30' : ''}}">
        <!-- 删除一行 -->
        <view wx:if="{{index <= 0}}" class="common_icon icon-a-43 white"></view>
        <view wx:else class="common_icon icon-a-43 col-70" data-index="{{index}}" data-name="0" bindtap="eliminate"></view>

        <!-- 开始/结束时间 -->
        <view style="width: 72%;">
            <picker mode="multiSelector" bindchange="bindTimePickerChange" value="{{item.timeIndex}}" range="{{timeArray}}" data-index="{{index}}" data-name="0">
                <view class="p-flex-around">
                    <view>{{item.startTime}}</view>
                    <view>-</view>
                    <view>{{item.endTime}}</view>
                </view>
             </picker>
         </view>

         <!-- 新增一行 -->
         <view class="common_icon icon-a-44 col-70" bindtap="increase" data-name="0"></view>
    </view>
</view>



<view wx:for="{{selectTime_1}}">
    <view class="time_bor {{index > 0 ? 'm-top30' : ''}}">
        <!-- 删除一行 -->
         <view wx:if="{{index <= 0}}" class="common_icon icon-a-43 white"></view>
         <view wx:else class="common_icon icon-a-43 col-70" data-index="{{index}}" data-name="1" bindtap="eliminate"></view>

        <!-- 开始/结束时间 -->
        <view style="width: 72%;">
            <picker mode="multiSelector" bindchange="bindTimePickerChange" value="{{item.timeIndex}}" range="{{timeArray}}" data-index="{{index}}" data-name="1">
                <view class="p-flex-around">
                    <view>{{item.startTime}}</view>
                    <view>-</view>
                    <view>{{item.endTime}}</view>
                </view>
            </picker>
        </view>

         <!-- 新增一行 -->
         <view class="common_icon icon-a-44 col-70" bindtap="increase" data-name="1"></view>
    </view>
</view>

3，逻辑js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    timeArray:[],
    selectTime:[],
    selectTime_1:[]
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.initTime();
  },

  // 时间选择列表初始化
  initTime(){
    let hourArray = [];
    let minArray = [];
    let timeIndex = [0,0,0,0,0];
    for (let i = 0; i < 60; i++) {
      let item = i >= 0 && i <= 9 ? '0' + i : i.toString();
      if(i < 60 ){
        minArray.push( item );
      };     
      if(i >= 24 ) continue;
      hourArray.push( item );    
    }
    let start = `${ hourArray[timeIndex[0]] }:${ minArray[timeIndex[1]] }`;
    let end = `${ hourArray[timeIndex[0]] }:${ minArray[timeIndex[1]] }`;
    //this.data.selectTime.tipElectricityFee是接口返回的字段，我是拿这个字段判断的
    // 当新增、编辑页面没有时间数据时候，默认一行开始，结束时间 00:00 — 00:00
    if(this.data.selectTime.tipElectricityFee == null || this.data.selectTime.tipElectricityFee == ""){
      let array = {startTime : start, endTime : end, timeIndex};
      this.setData({
        timeArray : [hourArray,minArray,['--'],hourArray,minArray],  //picker选择器时间列表
        selectTime : this.data.selectTime.concat(array),
        selectTime_1 : this.data.selectTime_1.concat(array)
      })
    }else{  // 当编辑页面有时间数据返回时，直接显示接口返回的时间数据
      this.data.selectTime.forEach(item => {   
        let start = item.startTime.split(':');  //开始时间转化成数组
        let end = item.endTime.split(':');  //结束时间转化成数组
        // 编辑页面返回的开始/结束时间数据，对应的picker选择器的时间下标，让picker选择器显示对应的时间
        item.timeIndex = [hourArray.indexOf(start[0]),minArray.indexOf(start[1]),0,hourArray.indexOf(end[0]),minArray.indexOf(end[1])]
      });
      this.data.selectTime_1.forEach(item => {  
        let start = item.startTime.split(':');
        let end = item.endTime.split(':');
        item.timeIndex = [hourArray.indexOf(start[0]),minArray.indexOf(start[1]),0,hourArray.indexOf(end[0]),minArray.indexOf(end[1])]
      });
      this.setData({
        timeArray : [hourArray,minArray,['--'],hourArray,minArray],  //picker选择器时间列表
        selectTime : this.data.selectTime,
        selectTime_1 : this.data.selectTime_1
      })
    }
  },

  /**
   * 删除一行
   */
  eliminate(e){
    if(e.currentTarget.dataset.name === '0'){
      this.data.selectTime.splice(e.currentTarget.dataset.index, 1);
      this.setData({
        selectTime : this.data.selectTime
      });
    }else if(e.currentTarget.dataset.name === '1'){
      this.data.selectTime_1.splice(e.currentTarget.dataset.index, 1);
      this.setData({
        selectTime_1 : this.data.selectTime_1
      });
    }
  },

  /**
   * 新增一行
   */
  increase(e){
    let timeIndex = [0,0,0,0,0];
    let array = {startTime : '00:00', endTime : '00:00' , timeIndex };
    if(e.currentTarget.dataset.name === '0'){
      this.setData({
        selectTime: this.data.selectTime.concat(array)
      })
    }else if(e.currentTarget.dataset.name === '1'){
      this.setData({
        selectTime_1: this.data.selectTime_1.concat(array)
      })
    }
  },

  /**
   * 时间选择
   */
  bindTimePickerChange(e){
    let timeIndex = e.detail.value;
    let timeArray = this.data.timeArray;
    let index = e.currentTarget.dataset.index;
    let start = `${ timeArray[0][timeIndex[0]] }:${ timeArray[1][timeIndex[1]] }`;
    let end = `${ timeArray[3][timeIndex[3]] }:${ timeArray[4][timeIndex[4]] }`;
    if(e.currentTarget.dataset.name === '0'){
      this.data.selectTime[index] = {startTime : start, endTime : end, timeIndex};
      this.setData({
        selectTime:this.data.selectTime
      })
    }else if(e.currentTarget.dataset.name === '1'){
      this.data.selectTime_1[index] = {startTime : start, endTime : end, timeIndex};
      this.setData({
        selectTime_1:this.data.selectTime_1
      })
    }
  },
})

4，css样式

.time_bor{
  display: flex;
  justify-content: space-between;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  background-color: white;
  border: 2rpx solid #EEEEEE;
}

.white {
  color: white;
}

.m-top30 {
  margin-top: 30rpx;
}

.p-flex-around {
  display: flex;
  justify-content: space-around;
}

.col-70 {
  color: #707070;
}