小程序回到顶部按钮(不依赖scroll-view) onReachBottom可用

实现原理: 用bindtouchmove获取WXML节点信息的相关函数,获取顶部滚动出去的距离,从而控制返回顶部按钮的显示/隐藏

<view class="container" bindtouchmove="handletouchmove">
...
</view>

<!-- 返回顶部按钮 -->
<view class='gotop' wx:if="{{showGoTop}}" bindtap='backToTop'>

</view>

Page({
data:{
showGoTop: false,
},
handletouchmove: function () {
this.queryMultipleNodes();
},
//获取屏幕滚动出去的高度
queryMultipleNodes: function () {
var self = this;
var query = wx.createSelectorQuery()
query.select('#container').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
res[0].top       // 节点的上边界坐标
//如果顶部的距离超过300   就显示GoTop按钮
if(res[0].top < -300) {
self.setData({
showGoTop: true
})
}
else {
self.setData({
showGoTop: false
})
}
})
},
//返回顶部
backToTop: function () {
wx.pageScrollTo({
scrollTop: 0,
duration: 400
});
this.setData({
showGoTop: false
})
}
})

这种方式可以不适用scroll-view组件,  所以不影响onReachBottom的使用