小程序模板网

微信小程序实现滚动回到顶部的两种方式

2021-06-10 旧家子
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.   },


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/26362.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询