欢迎光临,了解微信小程序开发,就上易用通! QQ登录

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

发布:2021-06-10 09:42浏览:来源:网络 编辑:admin

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.   },




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。