uniapp 選項卡動態切換更新數據問題

業務場景:
選項卡a,b,c
下面的 scrollor 滑動塊
點擊a 給循環變量data賦值a數組
點擊b 給循環變量data賦值b數組

以上場景比如點擊表情包,下面的表情內容會改變,而且表情是左右可以滑動的,像qq或者微信那樣。此類場景經常有新手遇到所以特此提供解決方案以便大家避坑

出現的問題:
當選項卡在a處,表情內容滑動到第二個view。
點擊選項卡b,表情內容還是在第二個view。正常是回到第一個view。

問題原因:
組件屬性設置不生效

粗線畫重點

當重複設置某些屬性爲相同的值時,不會同步到view層。 例如:每次將scroll-view組件的scroll-top屬性值設置爲0,只有第一次能順利返回頂部。 這和props的單向數據流特性有關,組件內部scroll-top的實際值改動後,其綁定的屬性並不會一同變化

監聽scroll事件,記錄組件內部變化的值,在設置新值之前先設置爲記錄的當前值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="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事件,獲取組件內部變化的值,實時更新其綁定值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
export default {
    data() {
        return {
            scrollTop: 0,
        }
    },
    methods: {
        scroll: function(e) {
            // 如果使用此方法,請自行增加防抖處理
            this.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = 0
        }
    }
}

第二種解決方式在某些組件可能造成抖動,推薦第一種解決方式。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章