小程序scroll-view实现回到顶部

一、wxml页面：catchtap阻止冒泡事件。

1. <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop">
2. <view>回到顶部</view>
3. </view>

二、在scroll-view形式下回到顶部

1. <scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
2. <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop">
3. <view>回到顶部</view>
4. </view>
5. </scroll-view>

JS页面代码段:

1. data:{
2. topNum: 0
3. }
4. // 获取滚动条当前位置
5. scrolltoupper:function(e){
6. console.log(e)
7. if (e.detail.scrollTop > 100) {
8. this.setData({
9. cangotop: true
10. });
11. } else {
12. this.setData({
13. cangotop: false
14. });
15. }
16. },
17. //回到顶部
18. goTop: function (e) { // 一键回到顶部
19. this.setData({
20. topNum:0
21. });
22. },