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

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

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

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

小程序返回頂部代碼_頂部返回微信程序小程序在哪_微信小程序返回頂部

遇到問題不要慌

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

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

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

在線咨詢

上一篇：小型論壇管理系統數據庫分析與設計說明書2
下一篇：一鍵收藏網頁、圖片，用這個全平臺工具就夠了

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

您的項目需求