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

需求

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

代码

wxml代码

<view style='position:fixed;right:15rpx;bottom:26rpx;width:70rpx;height:70rpx;border-radius:0;z-index:994;background:#fff;border-radius:50%;border:1px solid #cacaca;display:flex;flex-direction:column;align-items: center;opacity:0.5' wx:if="{{goTopStatus}}"bindtap='goToTop'>
    <image src='http://cos.qkmai.com/qkmbb/ytal/toptb.png' style='width:50rpx;height:auto;margin-top:10rpx' mode='widthFix'></image>
</view>

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),滚动动画时长，接口调用成功失败完成

具体可查看微信官方文档