uni-app 循环出来的picker-view-column 定位不会滚动到对应位置

uni-app 循环出来的picker-view-column 定位不会滚动到对应位置

问题描述

循环出来的picker-view-column 手动改picker-view 的value不生效

<picker-view :style="pickerViewStyle" :indicator-style="indicatorStyle" :immediateChange="immediateChange"  
    :value="pickerState.innerIndex" @change="changeHandler">  
    <picker-view-column v-for="(item,mainIdx) in timeState.columnList" :key="item.type">  
        <view v-for="(time,idx) in item.values" :key="`${item.type}--${time}-${idx}`" class="text-center">  
            <text :style="{height: $uv.addUnit(props.itemHeight),  lineHeight: $uv.addUnit(props.itemHeight),   
            fontWeight: idx === pickerState.innerIndex[mainIdx] ? 'bold' : 'normal'}">  
                {{time}}  
            </text>  
        </view>  
    </picker-view-column>  
</picker-view>

function init() {  
    getOriginColumns()  
}  

function times(n, iteratee) {  
    let index = -1  
    const result = Array(n < 0 ? 0 : n)  
    while (++index < n) {  
        result[index] = iteratee(index)  
    }  
    return result  
}  

function getOriginColumns() {  
    // 生成各列的值  
    const results = getRanges().map(({ type, range }) => {  
        let values = times(range[1] - range[0] + 1, (index) => {  
            let value = range[0] + index  
            value = type === 'year' ? `${value}` : uni.$uv.padZero(value)  
            return value  
        })  
        timeState[type] = values  
        return { type, values }  
    })  
    timeState.columnList = results  
    console.log('getOriginColumns', results);  
    nextTick(() => {  
        uni.$uv.sleep(100).then(res => {  
            pickerState.innerIndex = uni.$uv.deepClone([10, 10, 6, 5, 0])  
        })  
    })  
}  

// 获取每列的最大和最小值  
function getRanges() {  
    if (props.mode === 'time') {  
        return [{  
            type: 'hour',  
            range: [props.minHour, props.maxHour],  
        }, {  
            type: 'minute',  
            range: [props.minMinute, props.maxMinute],  
        }, ];  
    }  
    const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = getBoundary('max', '');  
    const { minYear, minDate, minMonth, minHour, minMinute, } = getBoundary('min', '');  
    const result = [{  
        type: 'year',  
        range: [minYear, maxYear],  
    }, {  
        type: 'month',  
        range: [minMonth, maxMonth],  
    }, {  
        type: 'day',  
        range: [minDate, maxDate],  
    }, {  
        type: 'hour',  
        range: [minHour, maxHour],  
    }, {  
        type: 'minute',  
        range: [minMinute, maxMinute],  
    }, ];  
    if (props.mode === 'date') result.splice(3, 2);  
    if (props.mode === 'year-month') result.splice(2, 3);  
    if (props.mode === 'year') result.splice(1, 4);  
    return result;  
}  

function getBoundary(type, innerValue) {  
    const value = new Date()  
    const boundary = new Date(props[`${type}Date`])  
    const year = dayjs(boundary).year()  
    let month = 1  
    let date = 1  
    let hour = 0  
    let minute = 0  
    if (type === 'max') {  
        month = 12  
        // 月份的天数  
        date = dayjs(value).daysInMonth()  
        hour = 23  
        minute = 59  
    }  
    // 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推  
    if (dayjs(value).year() === year) {  
        month = dayjs(boundary).month() + 1  
        if (dayjs(value).month() + 1 === month) {  
            date = dayjs(boundary).date()  
            if (dayjs(value).date() === date) {  
                hour = dayjs(boundary).hour()  
                if (dayjs(value).hour() === hour) {  
                    minute = dayjs(boundary).minute()  
                }  
            }  
        }  
    }  
    return {  
        [`${type}Year`]: year,  
        [`${type}Month`]: month,  
        [`${type}Date`]: date,  
        [`${type}Hour`]: hour,  
        [`${type}Minute`]: minute  
    }  
}  

onMounted(() => {  
    init()  
})