前言

在日常使用微信小程序時，你是否曾經遇到過翻頁疲勞的問題？或者在滑動頁面時不斷滑動才能回到頂部的尷尬情況？如果是這樣，那么你一定不想錯過今天的文章。我將為大家介紹一種簡單而實用的方法，讓你輕松實現 “一鍵回到頂部” 的功能，讓你的微信小程序使用更加便捷舒適。

---

實現思路

其實微信小程序跟 vue 實現的原理都大差不差，不同的是微信小程序有自己的方法，通過調用 wx.pageScrollTo(Object object) 方法即可實現該操作。

---

wx.pageScrollTo(Object object)

該方法可實現將頁面滾動到目標位置，支持選擇器和滾動距離兩種方式定位。

屬性描述

scrollTop	滾動到頁面的目標位置，單位 px
duration	滾動動畫的時長，單位 ms
selector	選擇器
offsetTop	偏移距離，需要和 selector 參數搭配使用，可以滾動到 selector 加偏移距離的位置，單位 px
success	接口調用成功的回調函數
fail	接口調用失敗的回調函數

如果你想要更深入的了解該方法，可查看 官方文檔說明

---

話不多說，下面進入實操。

---

wxml 代碼

catchtap是阻止冒泡事件

<view><!-- 占位容器 --><view wx:for="{{100}}">內容...</view><!-- 回到頂部 --><scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper"><view class="gotopBox" hidden='{{!cangotop}}' catchtap="goTopOn">??</view></scroll-view> </view>

js 代碼

const app = getApp() Page({data: {data: {topNum: 0, //默認為0cangotop: false, //回到頂部控件默認隱藏}},// 獲取滑動位置onPageScroll: function (e) {console.log("打印當前頁面滾動的距離：", e.scrollTop)//當頁面滑動距離大于一屏的高度時顯示回到頂部控件this.setData({cangotop: e.scrollTop > wx.getSystemInfoSync().windowHeight ? true : false});},//回到頂部，內部調用系統APIgoTopOn: function (e) {if (wx.pageScrollTo) {wx.pageScrollTo({scrollTop: 0})} else {wx.showModal({title: '提示',content: '當前微信版本過低，暫無法使用該功能，請升級后重試。'})}} })

css 樣式

.gotopBox {position: fixed;right: 40rpx;bottom: 60rpx;font-size: 54rpx; }

---

實現效果展示

---

相關推薦

? vue實現一鍵回到頂部

總結

以上是生活随笔為你收集整理的告别繁琐滑动，微信小程序一键回到顶部功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。