快捷導(dǎo)航

微信小程序返回到頂部功能的簡(jiǎn)單實(shí)現(xiàn)

更新時(shí)間：2022年11月18日 12:13:31 作者：前端若水

在做微信小程序開(kāi)發(fā)時(shí),遇到一個(gè)問(wèn)題,要如何實(shí)現(xiàn)返回頂部的功能,下面這篇文章主要給大家介紹了微信小程序返回到頂部功能的簡(jiǎn)單實(shí)現(xiàn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

業(yè)務(wù)需求

今天公司的PM給我提了個(gè)需求，微信小程序需要做一個(gè)返回頂部的功能，返回頂部的按鈕也是需要滑動(dòng)到頁(yè)面指定內(nèi)容顯示過(guò)后才出現(xiàn)的，微信小程序中沒(méi)有a標(biāo)簽，我通過(guò)查看小程序文檔結(jié)合思路將此功能實(shí)現(xiàn)

頁(yè)面結(jié)構(gòu)

我們一個(gè)頁(yè)面中有一個(gè)nav類(lèi)名的返回頂部元素，和一個(gè)text類(lèi)名盒子用于作為顯示返回頂部元素的界點(diǎn)

<view class="page">
<!-- 返回頂部按鈕 -->
  <view class="nav" bindtap="backTop" wx:if="{{isTop}}">返回頂部</view>
  <!-- 內(nèi)容 -->
  <view class="text" id="pos">
    展示頂部返回按鈕
  </view>
</view>

樣式

頁(yè)面大盒子我們使用背景顏色漸變色給一個(gè)高度用于做出滾動(dòng)的效果，然后將返回頂部的按鈕和頁(yè)面中的內(nèi)容設(shè)置下樣式

/* 頁(yè)面大盒子樣式 */
.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;
}
/* 內(nèi)容樣式 */
.text {
  margin-top: 500rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

實(shí)現(xiàn)邏輯

我們通過(guò)頁(yè)面加載獲取到頁(yè)面內(nèi)容距離頂部的高度，然后將此高度設(shè)置為指定滑動(dòng)距離，然后再通過(guò)onPageScroll方法去監(jiān)聽(tīng)頁(yè)面滑動(dòng)控制返回頂部變量的改變，以此控制返回頂部按鈕的顯示與隱藏，然后在給返回頂部按鈕綁定一個(gè)backTop方法，點(diǎn)擊返回頂部按鈕就通過(guò)微信小程序的API控制頁(yè)面直接返回頂部

Page({
  data: {
    //滑動(dòng)的指定距離，用于作為返回頂部標(biāo)記改變的界點(diǎn)
    top: 0,
    // 返回頂部標(biāo)記，頂部標(biāo)記為true則返回頂部按鈕顯示，頂部標(biāo)記為false，則返回頂部按鈕不展示
    isTop: false
  },
  /**
   * @function 返回頂部執(zhí)行方法
   */
  backTop() {
    //這是微信小程序給我們提供的頁(yè)面滾動(dòng)API方法
    wx.pageScrollTo({
      // 頁(yè)面滾動(dòng)的距離
      scrollTop: 0,
      // 滾動(dòng)動(dòng)畫(huà)執(zhí)行時(shí)間，我們這里就讓他執(zhí)行100毫秒
      duration: 100
    })
  },

  /**
   * 
   * @function 監(jiān)聽(tīng)頁(yè)面滑動(dòng)
   */
  onPageScroll(e) {
    // 使用ES6的方式頁(yè)面滾動(dòng)的event對(duì)象中的滾動(dòng)距離scrollTop變量解構(gòu)出來(lái)
    let {
      scrollTop
    } = e;
    // 將滑動(dòng)的指定距離變量和是否顯示返回頂部按鈕標(biāo)記也解構(gòu)出來(lái)
    let {
      top,
      isTop
    } = this.data;
    // 判斷當(dāng)前滾動(dòng)的距離是否大于等于我們?cè)O(shè)定的滑動(dòng)的指定距離且當(dāng)前返回頂部按鈕標(biāo)記為false
    if (scrollTop >= top && !isTop) {
      // 進(jìn)入則表示滑動(dòng)達(dá)到了指定位置，我們將返回頂部標(biāo)記改為true將返回頂部按鈕進(jìn)行展示出來(lái)
      this.setData({
        isTop: true
      })
    } else {
      // 如果上述條件則表示要么是未達(dá)到執(zhí)行位置或者已經(jīng)返回頂部標(biāo)記為true了，所以我們這里需要在判斷一下，當(dāng)前的滾動(dòng)距離是否小于我們?cè)O(shè)定的指定滑動(dòng)距離和當(dāng)前返回頂部標(biāo)記是否為true，這樣我們就只判斷當(dāng)前滑動(dòng)到指定位置和滑動(dòng)小于指定位置，如果大于滑動(dòng)指定位置我們就不做處理
      if (scrollTop <= top && isTop) {
        // 如果小于滑動(dòng)指定距離，我們就將返回頂部按鈕顯示標(biāo)記改為false
        this.setData({
          isTop: false
        })
      }
    }
  },
  /**
   * @function 獲取元素
   *  @return {number} id
   */

  query(id, fn) {
    // 通過(guò)微信的方式進(jìn)行獲取元素對(duì)象進(jìn)行操作，接受值為id，我們用回調(diào)函數(shù)進(jìn)行處理
    let query = wx.createSelectorQuery();
    query.select(id).boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(fn)
  },

  onLoad() {
    // 我們將當(dāng)前頁(yè)面中的內(nèi)容id傳遞進(jìn)去，通過(guò)內(nèi)容距離頂部的高度，設(shè)置滑動(dòng)的指定距離
    this.query("#pos", (e) => {
      let {
        top
      } = e[0];
      this.setData({
        top
      })
    })
  }
})