uniapp中組件屬性設置不生效的解決方案


scroll-view組件中當重復設置某些屬性為相同的值時,不會同步到view層。
例如:每次將scroll-view組件的scroll-top屬性值設置為0,只有第一次能順利返回頂部。 組件內部scroll-top的實際值改動后,其綁定的屬性並不會一同變化。

解決方法一,監聽scroll事件,記錄組件內部變化的值,在設置新值之前先設置為記錄的當前值

<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>

  

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
            }
        }
    }

  

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM