微信小程序回到顶部按钮.md

需求

小程序页面加载显示数据过多条后，需要一个回到顶部的按钮，一开始隐藏，下拉到一定高度才显示，点击回到顶部再隐藏。

代码

wxml代码

js代码

//监听页面高度(上滑或者下滑)
onPageScroll: function(obj) {
        if (obj.scrollTop > 363) {
            this.setData({
                goTopStatus: true
            })
        }
    },
goToTop: function() {
        wx.pageScrollTo({
            scrollTop: 0,
        })
        this.setData({
            goTopStatus: false
        })
    }

知识点

1. onPageScroll 页面滚动触发事件的处理函数
2. wx.pageScrollTo({}) 参数包含滚动到页面的目标位置(单位px),滚动动画时长，接口调用成功失败完成

具体可查看微信官方文档