小程序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.   },

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

上一篇:在小程序中实现 Mixins 方案


下一篇:小程序后端控制广告ID切换实现