uni-app H5模式下 picker选择器下标返回异常

uni-app H5模式下 picker选择器下标返回异常 产品分类:uniapp/H5

属性
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 10
HBuilderX类型 Alpha
HBuilderX版本号 3.3.8
浏览器平台 Chrome
浏览器版本 97.0.4692.71(正式版本) (64 位)
项目创建方式 HBuilderX

bug描述:

H5端 手机窗口模式下, 当picker内容超过150个选项时,选中选项,下标(即:e.detail.value)与选中项下标不一致
此问题出现于H5端,包括Chrome 手机窗口模式,手机系统浏览器等环境。APP端未出现该异常

示例代码:

<template>  
    <view>  
        <view class="uni-title uni-common-pl">普通选择器</view>  
        <view class="uni-list">  
            <view class="uni-list-cell">  
                <view class="uni-list-cell-left">  
                    当前选择  
                </view>  
                <view class="uni-list-cell-db">  
                    <picker @change="bindPickerChange" :value="index" :range="array" range-key="name">  
                        <view class="uni-input">{{array[index].name}}</view>  
                    </picker>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  
<script>  
    let array=[]  
    for (var i = 1; i <= 150; i++) {  
        array.push({  
            name:'爱你'+ i + '遍'  
        })  
    }  
    export default {  
        data() {  
            return {  
                index:0,  
                array  
            }  
        },  
        methods: {  
            bindPickerChange: function(e) {  
                console.log('picker发送选择改变,携带值为:' + e.detail.value)  
                this.index = e.detail.value  
            },  
        }  
    }  
</script>  

<style>  
.uni-picker-tips {  
    font-size: 12px;  
    color: #666;  
    margin-bottom: 15px;  
    padding: 0 15px;  
    /* text-align: right; */  
}  
</style>  

更多关于uni-app H5模式下 picker选择器下标返回异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

测试正常,未复现此问题

更多关于uni-app H5模式下 picker选择器下标返回异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


收到,抱歉占用时间,我再检查下本地环境

回到顶部