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

配置项如下

scrollTop	String	否	滚动到页面的目标位置（单位px）
selector	String	否	选择器，VX小程序2.7.3+ 、zfb小程序1.20.0+支持
duration	Number	否	滚动动画的时长，默认300ms，单位 ms
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

代码示例：

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

        },