picker-view无法滚动或滚动后回弹至首项
环境:uni-app开发H5项目,H5项目链接webview嵌入app中
情境:表单页面分为只读状态与编辑状态,当从编辑状态转回只读状态时重置picker-view的激活项;后续再返回编辑状态时,表现为picker-view始终固定在首项,滚动后也回弹至首项
原因:手动设置picker-view的激活项就会导致该问题,深层原因不明,可能是潜在bug
方案:每次需要手动设置picker-view的激活项前都将可选数组清空并取消渲染该组件,使用setTimeout再将原来的可选数组恢复并重新渲染,营造的效果为每次修改时都重新渲染组件,以此规避无法滚动的问题
1.picker-view组件
<picker-view
:value="[channelType.activeIndex]"
@change="pickerViewChange"
data-field="channelType"
>
<picker-view-column v-if="channelType.data.length > 0">
<view v-for="(item, index) in channelType.data" :key="item.value">{
{
item.text }}</view>
</picker-view-column>
</picker-view>
2.退出编辑状态
async cancelEdit() {
const {
store, channelType } = this;
let chanelIndex = 0
let channelData = [].concat(channelType.data)
if (store.channelType) {
// 清空数据使组件不渲染
chanelIndex = channelType.data.findIndex((t) => t.value === store.channelType);
channelType.data = []
if (chanelIndex > -1) {
// 使用setTimeout在下个宏任务中再将组件渲染
setTimeout(()=> {
this.setData({
'channelType.data': channelData,
'channelType.activeIndex': chanelIndex,
'channelType.activeText': channelData[chanelIndex].text
});
}, 50)
}
} else {
// 该表单项无值时也需使组件重新渲染一遍
channelType.data = []
setTimeout(() => {
this.setData({
'channelType.data': channelData,
'channelType.activeIndex': 0,
'channelType.activeText': ''
});
})
}
},