picker-view中value无效,每次都是选中第一个,用nextTick来解决

代码如下:使用uni-popup和picker-view组成的底部日期选择,发现传入一个初始的value不生效,每次打开都是默认选择第一个 

  <uni-popup
    ref="popupRef"
    class="record-popup"
    type="bottom"
    background-color="#fff"
    :is-mask-click="false"
    mask-background-color="rgba(0, 0, 0, 0.4)"
    :safe-area="false"
  >
    <picker-view :indicator-style="options.indicatorStyle" :value="dateSelectList" @change="bindChange" class="record-popup-pickerView">
      <picker-view-column>
        <view class="record-popup-pickerView-item" v-for="(item, index) in options.years" :key="index">{{ item }}年</view>
      </picker-view-column>
      <picker-view-column>
        <view class="record-popup-pickerView-item" v-for="(item, index) in options.months" :key="index">{{ item }}月</view>
      </picker-view-column>
      <picker-view-column>
        <view class="record-popup-pickerView-item" v-for="(item, index) in options.days" :key="index">{{ item }}日</view>
      </picker-view-column>
    </picker-view>
    <view class="ds-fx jc-c mt-40 pb-40">
      <view class="ds-fx jc-sb w-450">
        <view class="ds-fx jc-c fs-34 c-primary w-200 record-popup-cancel" @click="handleControlPopup('close')">
          <span>取消</span>
        </view>
        <view class="ds-fx jc-c fs-34 c-white w-200 record-popup-confirm" @click="handleControlPopup('close', true)">
          <span>完成</span>
        </view>
      </view>
    </view>
  </uni-popup>

定义属性的代码: 

import uniPopup from '../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue';

interface OptionsValue {
  isVisible: boolean;
  loading: boolean;
  nowYear: string;
  nowMonth: string;
  nowDay: string;
  nowDate: string;
  nowDateCopy: string;
  indicatorStyle: string;
  years: Array<string>;
  months: Array<string>;
  days: Array<string>;
}

const options: OptionsValue = reactive({
  isVisible: false,
  loading: false,
  nowYear: dayjs().format('YYYY'),
  nowMonth: dayjs().format('MM'),
  nowDay: dayjs().format('DD'),
  nowDate: dayjs().format('YYYY-MM-DD'),
  nowDateCopy: dayjs().format('YYYY-MM-DD'),
  indicatorStyle: `height: 50px;`,
  years: [],
  months: [],
  days: [],
});

const dateSelectList = ref<Array<Number>>([]);
const popupRef = ref<InstanceType<typeof uniPopup> | null>(null);

解决这个value不生效的代码:

/* 获取年月日数组 */
function getYearsAndMonths() {
  options.years.length = 0;
  options.months.length = 0;
  for (let i = 1990; i <= Number(options.nowYear); i++) {
    options.years.push(String(i));
  }
  for (let i = 1; i <= 12; i++) {
    let index = i >= 10 ? i + '' : '0' + i;
    options.months.push(index);
  }
  for (let i = 1; i <= 31; i++) {
    let dayIndex = i >= 10 ? i + '' : '0' + i;
    options.days.push(dayIndex);
  }
  handleFindIndex();
}
/* 找到当前选中年月日所在数组的index */
function handleFindIndex() {
  dateSelectList.value = [0, 0, 0];
  let yearIndex = options.years.findIndex((item) => {
    return item == options.nowYear;
  });
  let monthIndex = options.months.findIndex((item) => {
    return item == options.nowMonth;
  });
  let dayIndex = options.days.findIndex((item) => {
    return item == options.nowDay;
  });
  nextTick(() => {
    dateSelectList.value = [yearIndex, monthIndex, dayIndex];
  });
}

解决后生效: 

补充功能:点击回到今天,修改属性,调用handleFindIndex(),picker-view的value依然生效。

代码:

function handleBackToToday() {
  options.nowYear = dayjs().format('YYYY');
  options.nowMonth = dayjs().format('MM');
  options.nowDay = dayjs().format('DD');
  options.nowDate = dayjs().format('YYYY-MM-DD');
  options.nowDateCopy = dayjs().format('YYYY-MM-DD');
  handleFindIndex()
}

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值