微信小程序實現(xiàn)一鍵回到頂部功能

更新時間：2022年07月01日 14:41:22 作者：

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)一鍵回到頂部功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

遇到問題不要慌

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

.wxml文件代碼

? ? ? ? ? ? 

.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({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? 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
? ? ? });
? ? ??
? ? }
? }
})

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。