微信小程序返回到顶部功能的简单实现

目录

• 业务需求
• 页面结构
• 样式
• 实现逻辑
• 总结

业务需求

今天公司的PM给我提了个需求，微信小程序需要做一个返回顶部的功能，返回顶部的按钮也是需要滑动到页面指定内容显示过后才出现的，微信小程序中没有a标签，我通过查看小程序文档结合思路将此功能实现

页面结构

我们一个页面中有一个nav类名的返回顶部元素，和一个text类名盒子用于作为显示返回顶部元素的界点

  返回顶部
  
  
    展示顶部返回按钮
  

样式

页面大盒子我们使用背景颜色渐变色给一个高度用于做出滚动的效果，然后将返回顶部的按钮和页面中的内容设置下样式

/* 页面大盒子样式 */
.page {
  width: 100%;
  height: 1500px;
  background: linear-gradient(to bottom, red, blue, #fff, yellow);
  padding-top: 700rpx;
}
/* 返回顶部按钮样式 */
.nav {
  position: fixed;
  right: 10rpx;
  bottom: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70rpx;
  height: 100rpx;
  padding: 10rpx;
  background: rgb(216, 148, 148);
  border-radius: 10rpx;
}
/* 内容样式 */
.text {
  margin-top: 500rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

实现逻辑

我们通过页面加载获取到页面内容距离顶部的高度，然后将此高度设置为指定滑动距离，然后再通过onPageScroll方法去监听页面滑动控制返回顶部变量的改变，以此控制返回顶部按钮的显示与隐藏，然后在给返回顶部按钮绑定一个backTop方法，点击返回顶部按钮就通过微信小程序的API控制页面直接返回顶部

Page({
  data: {
    //滑动的指定距离，用于作为返回顶部标记改变的界点
    top: 0,
    // 返回顶部标记，顶部标记为true则返回顶部按钮显示，顶部标记为false，则返回顶部按钮不展示
    isTop: false
  },
  /**
   * @function 返回顶部执行方法
   */
  backTop() {
    //这是微信小程序给我们提供的页面滚动API方法
    wx.pageScrollTo({
      // 页面滚动的距离
      scrollTop: 0,
      // 滚动动画执行时间，我们这里就让他执行100毫秒
      duration: 100
    })
  },

  /**
   * 
   * @function 监听页面滑动
   */
  onPageScroll(e) {
    // 使用ES6的方式页面滚动的event对象中的滚动距离scrollTop变量解构出来
    let {
      scrollTop
    } = e;
    // 将滑动的指定距离变量和是否显示返回顶部按钮标记也解构出来
    let {
      top,
      isTop
    } = this.data;
    // 判断当前滚动的距离是否大于等于我们设定的滑动的指定距离且当前返回顶部按钮标记为false
    if (scrollTop >= top && !isTop) {
      // 进入则表示滑动达到了指定位置，我们将返回顶部标记改为true将返回顶部按钮进行展示出来
      this.setData({
        isTop: true
      })
    } else {
      // 如果上述条件则表示要么是未达到执行位置或者已经返回顶部标记为true了，所以我们这里需要在判断一下，当前的滚动距离是否小于我们设定的指定滑动距离和当前返回顶部标记是否为true，这样我们就只判断当前滑动到指定位置和滑动小于指定位置，如果大于滑动指定位置我们就不做处理
      if (scrollTop <= top && isTop) {
        // 如果小于滑动指定距离，我们就将返回顶部按钮显示标记改为false
        this.setData({
          isTop: false
        })
      }
    }
  },
  /**
   * @function 获取元素
   *  @return {number} id
   */

  query(id, fn) {
    // 通过微信的方式进行获取元素对象进行操作，接受值为id，我们用回调函数进行处理
    let query = wx.createSelectorQuery();
    query.select(id).boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(fn)
  },

  onLoad() {
    // 我们将当前页面中的内容id传递进去，通过内容距离顶部的高度，设置滑动的指定距离
    this.query("#pos", (e) => {
      let {
        top
      } = e[0];
      this.setData({
        top
      })
    })
  }
})

总结

到此这篇关于微信小程序返回到顶部功能的文章就介绍到这了,更多相关微信小程序返回到顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！