uni-app scroll-view设置scrollTop为0返回顶部不生效

组件属性设置不生效解决办法：
每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。
场景：
左侧商品栏，右侧商品列表，每次点击商品栏右侧商品列表滚动到顶部。
但是设置了scrollTop为0只有第一次生效了，当滚动列表，第二次点击商品栏时会发现列表并没有滚动到顶部。
解决方法：
1.监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值

1

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
            });
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.监听scroll事件，获取组件内部变化的值，实时更新其绑定值

1

	export default {
		data() {
			return {
				scrollTop: 0,
			}
		},
		methods: {
			scroll: function(e) {
				// 如果使用此方法，请自行增加防抖处理
				this.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = 0
			}
		}
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。
原文链接：https://uniapp.dcloud.net.cn/tutorial/vue-api.html#componentsolutions

bug2:
想要右侧商品列表实现锚点的效果，最开始的时候将scroll-view放在view块中动态绑定了scroll-top的值，发现值变化了，但是页面没有滚动，猜测：是外面的块把scroll-view滚动给封住了。
解决方法：将scroll-view放在最外层就好了。
头疼的一天~~~~~