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 } } }
第二種解決方式在某些組件可能造成抖動,推薦第一種。