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 } } }
第二种解决方式在某些组件可能造成抖动,推荐第一种。