小程序返回顶部

小程序回顾一键返回顶部:这里用的不是scroll-view模式,如果需要用可自行网上查阅,这里就不多说了。这里使用的是onPageScroll和wx.pageScrollTo,直接上代码:
在返回点击按钮标签上绑定条件渲染hidden,然后在JS的page data:{} 里面初始化返回顶部按钮隐藏goTopHidden: true
1、实现隐藏显示JS如下:

1
2
3
4
5
6
7
8
9
10
11
12
onPageScroll: function (e) { // 获取滚动条当前位置
//console.log(e); //scrollTop的位置
if (e.scrollTop >= 400) {
this.setData({
goTopHidden: false,
})
} else {
this.setData({
goTopHidden: true,
})
}
}

2、实现返回顶部JS如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
goTop: function (e) {  // 一键回到顶部
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0,
goTopHidden: false
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
},

-----本文结束感谢您的阅读-----