微信小程序-picker-view 设置value值时触发bindchange事件

做一个联动的日期滚动组件时,用微信小程序的原生picker-view(本来想用vant,但是有个滚动回弹的bug)在bindChange事件中设置value会再次触发bindChange事件,造成页面滚动,可以加一个开关:

      if (this.data.isSlide) {
        this.setDefTime(val1, val2);
      }
      if (this.data.isSlide) {
        this.setData({
          value,
          isSlide: false
        })
        setTimeout(() => {
          this.setData({
            isSlide: true
          })
        }, 500)
      }

这样就可以阻断了

import dayjs from 'dayjs'

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    showTime: {
      type: Boolean,
      value: false
    },
    defaultTime: {
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    years: [],
    months: [],
    days: [],
    year: 0,
    month: 1,
    day: 1,
    value: [],
    isSlide: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //日期滑动
    bindChange(e) {
      let val1 = e.detail.value;
      let val2 = this.data.value;
      if (this.data.isSlide) {
        this.setDefTime(val1, val2);
      }
    },
    //设置默认时间
    setDefTime(val1, val2) {
      let defTime;
      if (val1[0] !== val2[0]) {
        let year = this.data.years[val1[0]];
        defTime = year + '-' + this.data.month + '-' + this.data.day
      } else if (val1[1] !== val2[1]) {
        let month = this.data.months[val1[1]];
        defTime = this.data.year + '-' + month + '-' + this.data.day
      } else {
        let day = this.data.days[val1[2]];
        defTime = this.data.year + '-' + this.data.month + '-' + day
      }
      this.setValue(defTime)
    },
    //设置年月日value
    setValue(defTime) {
      let year, month, day;
      let months = [],
        years = [],
        days = [],
        value = [];
      if (defTime) {
        let arr = defTime.split('-');
        year = parseInt(arr[0]);
        month = parseInt(arr[1]);
        day = parseInt(arr[2]);
      } else {
        year = dayjs().year();
        month = dayjs().month() + 1;
        day = dayjs().date();
      }
      value.push(year - dayjs().year() + 3);
      for (let i = dayjs().year() - 3; i <= dayjs().year(); i++) {
        years.push(i)
      }
      if (year == dayjs().year()) {
        for (let i = 1; i <= dayjs().month() + 1; i++) {
          months.push(i)
        }
        if (months.indexOf(month) > -1) {
          value.push(months.indexOf(month))
        } else {
          value.push(months.length - 1);
          month = months[months.length - 1]
        }
        let m = month == dayjs().month() + 1 ? dayjs().date() : dayjs(year + '-' + month).daysInMonth();
        for (let i = 1; i <= m; i++) {
          days.push(i);
        }
        if (days.indexOf(day) > -1) {
          value.push(days.indexOf(day))
        } else {
          day = days[days.length - 1];
          value.push(days.length - 1)
        }
      } else if (year == dayjs().year() - 3) {
        for (let i = dayjs().month() + 1; i <= 12; i++) {
          months.push(i)
        }
        if (months.indexOf(month) > -1) {
          value.push(months.indexOf(month))
        } else {
          value.push(0);
          month = months[0]
        }
        let m = month == dayjs().month() + 1 ? dayjs().date() : 1;
        for (let i = m; i <= dayjs(year + '-' + month).daysInMonth(); i++) {
          days.push(i)
        }
        if (days.indexOf(day) > -1) {
          value.push(days.indexOf(day))
        } else {
          day = days[days.length - 1];
          value.push(days.length - 1)
        }
      } else {
        for (let i = 1; i <= 12; i++) {
          months.push(i);
          if (month == i) {
            value.push(i - 1)
          }
        }
        for (let i = 1; i <= dayjs(year + '-' + month).daysInMonth(); i++) {
          days.push(i)
          if (day == i) {
            value.push(i - 1)
          }
        }
        if (days.indexOf(day) > -1) {
          value.push(days.indexOf(day))
        } else {
          day = days[days.length - 1];
          value.push(days.length - 1)
        }
      }
      this.setData({
        year,
        month,
        day,
        years,
        months,
        days,
      })
      if (this.data.isSlide) {
        this.setData({
          value,
          isSlide: false
        })
        setTimeout(() => {
          this.setData({
            isSlide: true
          })
        }, 500)
      }

    },
    //关闭日期
    closeTime() {
      this.triggerEvent("closeAndConfirm",'close')
    },
    //确认日期
    confirmTime() {
      let confirmDate = this.data.year + '-' + this.data.month + '-' + this.data.day;
      this.triggerEvent("closeAndConfirm",confirmDate)
    },
  },
  lifetimes: {
    attached() {
      this.setValue(this.properties.defaultTime)
    }
  },
})

你可能感兴趣的:(小程序,微信小程序)