1***@163.com
1***@163.com
  • 发布:2024-11-27 18:18
  • 更新:2024-11-27 18:18
  • 阅读:212

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

分类:uni-app

循环出来的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()  
    })
2024-11-27 18:18 负责人:无 分享
已邀请:

要回复问题请先登录注册