<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>
7***@qq.com
- 发布：2022-01-18 17:06
- 更新：2022-01-18 17:50
- 阅读：295
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10
HBuilderX类型： Alpha
HBuilderX版本号： 3.3.8
浏览器平台： Chrome
浏览器版本： 97.0.4692.71（正式版本） （64 位）
项目创建方式： HBuilderX
示例代码：
操作步骤：
使用官方demo，H5端 手机窗口模式，将picker内容数组填充至150项，然后选中第150项，查看下标，再选中第149项，查看下标，即可发现异常
使用官方demo，H5端 手机窗口模式，将picker内容数组填充至150项，然后选中第150项，查看下标，再选中第149项，查看下标，即可发现异常
预期结果：
当picker项目为150项时：选中第150项，预期返回下标为149，实际返回下标149，正常；又选中第149项，预期返回下标为148，实际返回下标147，错误；
当picker项目为150项时：选中第150项，预期返回下标为149，实际返回下标149，正常；又选中第149项，预期返回下标为148，实际返回下标147，错误；
实际结果：
当picker项目为150项时：选中第150项，预期返回下标为149，实际返回下标149，正常；又选中第149项，预期返回下标为148，实际返回下标147，错误；
当picker项目为150项时：选中第150项，预期返回下标为149，实际返回下标149，正常；又选中第149项，预期返回下标为148，实际返回下标147，错误；
bug描述：
H5端 手机窗口模式下， 当picker内容超过150个选项时，选中选项，下标（即：e.detail.value）与选中项下标不一致
此问题出现于H5端，包括Chrome 手机窗口模式，手机系统浏览器等环境。APP端未出现该异常
7***@qq.com (作者)
收到，抱歉占用时间，我再检查下本地环境
2022-01-19 10:12