uniappタブ動的切替更新データ問題

ビジネスシーン:タブa,b,cの下のscrollorスライドブロックをクリックaをクリックして循環変数dataにa配列を割り当てるbをクリックして循環変数dataにb配列を割り当てる...以上のシーンは、例えば表情パックをクリックすると、下の表情内容が変わり、しかも表情が左右にスライドすることができ、qqや微信のように.このようなシーンでは、初心者がよく遭遇するので、穴を避けるためのソリューションを提供します.
問題:タブがaにある場合、表情の内容は2番目のviewにスライドします.タブbをクリックすると、表情の内容は2番目のviewになります.普通は最初のviewに戻ります.
問題の原因:コンポーネントのプロパティ設定が有効ではありません
太線画のポイント
いくつかのプロパティが同じ値に設定されている場合、viewレイヤに同期しません.たとえば、scroll-viewコンポーネントのscroll-topプロパティ値を0に設定するたびに、最初に上部にスムーズに戻ることができます.これはpropsの一方向データストリーム特性に関係し,コンポーネント内部のscroll-topの実際の値が変更されると,そのバインドされた属性は共に変化しない.
scrollイベントをリスニングし、コンポーネント内部の変化した値を記録し、新しい値を設定する前に記録の現在値に設定します.

export default {
    data() {
        return {
            scrollTop: 0,
            old: {
                scrollTop: 0
            }
        }
    },
    methods: {
        scroll: function(e) {
            this.old.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function() {
                this.scrollTop = 0
            });
        }
    }
}

scrollイベントをリスニングし、コンポーネントの内部変化の値を取得し、バインド値をリアルタイムで更新します.

export default {
    data() {
        return {
            scrollTop: 0,
        }
    },
    methods: {
        scroll: function(e) {
            //        ，         
            this.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = 0
        }
    }
}

第2の解決策は、一部のコンポーネントでジッタを発生させる可能性があり、第1の解決策を推奨する.