【大前端】uniapp如何实现回顶效果（滚动条监听）

对于较长的页面，使用回顶特效是很能提升用户感受的。
其实uniapp中实现此功能也非常简单，只需要使用一个api以及一个生命周期函数

生命周期函数：onPageScroll（e）

onPageScroll(e)相当于对当前页面进行滚动条监听。
e是每次滚动屏幕返回的对象，其中scrollTop属性为当前位置距顶部的距离；

代码示例：

onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			if (e.scrollTop > 224) { //当距离大于600时显示回到顶部按钮
			
				this.isShow = true
			} else { //当距离小于600时隐藏回到顶部按钮
				this.isShow = false
			}
		}

api:uni.pageScrollTo

配置项如下

代码示例：

methods: {
			top() { //回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}

		},