picker-view がスクロールできない、またはスクロール後に最初の項目に戻ってしまう

picker-view がスクロールできない、またはスクロール後に最初の項目に戻ってしまう

環境：uni-appでH5プロジェクトを開発し、H5プロジェクトはWebViewをリンクしてアプリに埋め込む
状況：フォームページが読み取り専用状態と編集状態に分かれており、編集状態から読み取り状態に戻ると-only 状態では、ピッカー ビューのアクティブ化項目がリセットされます; フォローアップ 編集状態に戻ると、ピッカー ビューは常に最初の項目に固定され、スクロール後に最初の項目に戻ります 理由:
手動設定ピッカー ビューのアクティブ化項目がこの問題を引き起こします。根本的な原因は不明であり、潜在的なバグ
解決策である可能性があります。ピッカー ビューのアクティブ化項目を手動で設定する必要があるたびに、オプションの配列をクリアして、コンポーネント。setTimeout を使用して、元のオプションの配列を復元し、再レンダリングします。その結果、コンポーネントは変更されるたびに再レンダリングされ、スクロールできない問題を回避します。

1.ピッカービューコンポーネント

<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': ''
            });
        })
    }


},