微信小程序实现一键回到顶部

前言

内容比较基础,但对于刚入门的人来说或许是一个窗口,博客将持续更新改进,请关注收藏...


wxml 代码 catchtap是阻止冒泡事件

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

data 数据

 data:{
    topNum: 0
  }

js 代码

// 获取滚动条当前位置
  onPageScroll: function (e) {
    console.log(“打印当前页面滚动的距离=+e)
 
 console.log(e)
    if (e.scrollTop > 100) {//页面距离大于100px,则显示回到顶部控件
      this.setData({
        cangotop: true
      });
    } else {
      this.setData({
        cangotop: false
      });
    }
  },
 
  //回到顶部,内部调用系统API
  goTop: function (e) {  // 一键回到顶部
    if (wx.pageScrollTo) {
 
//   //wx.pageScrollTo(OBJECT)
//   基础库 1.4.0 开始支持,低版本需做兼容处理
//   将页面滚动到目标位置。
//   OBJECT参数说明:
//   参数名	类型	必填	说明
//   scrollTop	Number	是	滚动到页面的目标位置(单位px)
//   duration	Number	否	滚动动画的时长,默认300ms,单位 ms
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低,暂无法使用该功能,请升级后重试。'
      })
    }
  }

css 样式

.gotop{
     position:fixed;
     right:30rpx;
     bottom:50rpx;
     height:60rpx;
     width:100rpx;
     display:flex;
     flex-direction:row;
     align-items:center;
     justify-content:center;
     text-align:center;
     color:white;
     font-size:21rpx;
     background:#a78e72;
}
  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值