微信小程序怎么实现回到顶部

小程序 专栏收录该内容
8 篇文章 0 订阅

在这里插入图片描述

wxml:

<!-- 点击回顶部 -->
<image src='/images/top.jpg' class='goTop' hidden='{{showTop}}' bindtap='goTop'></image>

wxss:

.goTop{position: fixed;bottom: 20px;right: 15px;width: 32px;height: 32px;}

js:

data: {
  showTop:"false",//回顶部
},
//回顶部
  onPageScroll: function (e) {
    console.log(e.scrollTop)
    if (e.scrollTop > 300) {
      this.setData({
        showTop: false
      })
    } else {
      this.setData({
        showTop: true
      })
    }
  },
  goTop: function (e) { // 一键回到顶部
    if (wx.pageScrollTo) {
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
      })
    }
  },
  • 1
    点赞
  • 1
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值