微信小程序中回到顶部的实现

逆战之回到顶部的实现

HTML:
<!-- 返回顶部按钮 -->
<!-- 绑定事件 
  vue v-on:click=""
  react onCLick={ this.clickFn }
  minpro  移动端尽量不使用click事件 ,建议使用tap事件,或者使用touch代替click事件
    bindtap  
    catchtap  ---- 阻止冒泡
    事件不加() bindtap="backtop"
 -->

 <button class="backtop" bindtap="backtop" hidden="{{!srcolltop}}">回到顶部</button>

CSS:
.backtop {
  position: fixed;
  bottom: 20px;
  right: 10px;
}
JS:
/**
   * 页面的初始数据  ---- 
   */
  data: {
    srcolltop: false
  },

/**
   * 页面滚动触发事件的处理函数
   * 默认的参数就是滚动条距离顶部的距离 - options
   * 滚动到某一个位置,出现返回顶部按钮
   */
  onPageScroll(options) {
    // console.log('页面滚动起来了')
    console.log(options)
    // 如果滚动距离大于100 修改状态为true 出现回到顶部按钮 
    if (options.scrollTop > 100) {
      this.setData({
        srcolltop : true
      })
    } else {
      this.setData({
        srcolltop: false
      })
    }
  },

/**
   * 返回顶部事件
   * https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html
   */
  backtop() {
    wx.pageScrollTo({
      scrollTop: 0,     
    })
  },
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值