代码如下:使用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()
}