微信小程序怎么實現一鍵回到頂部功能

這篇“微信小程序怎么實現一鍵回到頂部功能”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序怎么實現一鍵回到頂部功能”文章吧。

做微信小程序的時候遇到了這個問題要求列表頁要做一個實現上拉一定距離后顯示一鍵返回頂部的點擊可以一下子回到列表頂部。

遇到問題不要慌

面向百度編程 ----上代碼

.wxml文件代碼

<!-- 返回頂部  -->
            <view class='goTop' hidden='{{!scrollTop}}' bindtap="goTop">
            返回頂部  //這里可以換成一個圖標
            </view>

.wxss文件代碼

.goTop{
    height: 80rpx;
    width: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 200rpx;
    background: rgba(0,0,0,.3);
    right: 80rpx; 
    border-radius: 50%;
    z-index: 9;
    }

.js文件代碼

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    scrollTop: false,
  },
  //回到頂部

goTop: function (e) {
  // 一鍵回到頂部
  if (wx.pageScrollTo) {
  
  wx.pageScrollTo({ scrollTop: 0 })
  
  } else {
  
  wx.showModal({
  
  title: '提示', content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
  
  })
  } 
},
  // 獲取滾動條當前位置
  onPageScroll: function (e) {
  
    if (e.scrollTop > 200) {
    
      this.setData({
        scrollTop: true
      });
      
    } else {
    
      this.setData({
        scrollTop: false
      });
      
    }
  }
})

以上就是關于“微信小程序怎么實現一鍵回到頂部功能”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。