小程序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.   // 獲取滾動條當前位置
6.   scrolltoupper:function(e){
7.     console.log(e)
8.     if (e.detail.scrollTop > 100) {
9.       this.setData({
10.         cangotop: true
11.       });
12.     } else {
13.       this.setData({
14.         cangotop: false
15.       });
16.     }
17.   },
18.  
19.   //回到頂部
20.   goTop: function (e) {  // 一鍵回到頂部
21.     this.setData({
22.       topNum:0
23.     });
24.   },