微信小程序?qū)崿F(xiàn)一鍵回到頂部功能

更新時(shí)間：2022年07月01日 14:41:22 作者：zuobufan

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

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

遇到問(wèn)題不要慌

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

.wxml文件代碼

<!-- 返回頂部 ?-->
? ? ? ? ? ? <view class='goTop' hidden='{{!scrollTop}}' bindtap="goTop">
?? ??? ??? ?返回頂部 ?//這里可以換成一個(gè)圖標(biāo)
?? ??? ??? ?</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({

? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? scrollTop: false,
? },
? //回到頂部

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js調(diào)試系列控制臺(tái)命令行API使用方法
上次初步介紹了什么是控制臺(tái)，以及簡(jiǎn)單的 console.log 輸出信息。最后還有兩個(gè)小問(wèn)題，我們就當(dāng)回顧，來(lái)看下怎么操作吧
2014-06-06
基于JavaScript實(shí)現(xiàn)幸運(yùn)抽獎(jiǎng)頁(yè)面
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)幸運(yùn)抽獎(jiǎng)頁(yè)面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-03-03
環(huán)形加載進(jìn)度條封裝（Vue插件版和原生js版）
這篇文章主要為大家詳細(xì)介紹了環(huán)形加載進(jìn)度條封裝，Vue插件版，原生js版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
淺析$(function) ready和onload 的區(qū)別
新手剛學(xué)習(xí)js和jq的時(shí)候難免會(huì)接觸題目所標(biāo)識(shí)的相關(guān)內(nèi)容，下面小編通過(guò)本教程給大家講解(function) ready和onload 的區(qū)別，感興趣的朋友一起看看吧
2016-09-09
怎么在下面的HTML里調(diào)用數(shù)組cs[]的值
怎么在下面的HTML里調(diào)用數(shù)組cs[]的值...
2007-01-01
JavaScript引擎實(shí)現(xiàn)async/await的方法實(shí)例
大家應(yīng)該都知道隨著Node 7的發(fā)布,越來(lái)越多的人開(kāi)始研究據(jù)說(shuō)是異步編程終級(jí)解決方案的async/await,下面這篇文章主要給大家介紹了關(guān)于JavaScript引擎是如何實(shí)現(xiàn)async/await的相關(guān)資料,需要的朋友可以參考下
2022-03-03
javaScript基礎(chǔ)詳解
本文主要介紹了javaScript的基礎(chǔ)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
javascript:void(0)點(diǎn)擊登錄沒(méi)反應(yīng)怎么解決
這篇文章給大家介紹javascript:void(0)點(diǎn)擊登錄沒(méi)反應(yīng)怎么解決，解決辦法是巧用批處理解決IE不支持JavaScript等問(wèn)題，需要的朋友參考下
2015-11-11
JavaScript中各種二進(jìn)制對(duì)象關(guān)系的深入講解
JavaScript中用于表示二進(jìn)制對(duì)象有,Blob對(duì)象、和 ArrayBuffer 對(duì)象,這篇文章主要給大家介紹了關(guān)于JavaScript中各種二進(jìn)制對(duì)象關(guān)系的相關(guān)資料,需要的朋友可以參考下
2021-09-09
使用Web?Component實(shí)現(xiàn)防篡改水印
Web?Component內(nèi)部有鉤子天然支持被篡改時(shí)被觸發(fā),用來(lái)防篡改非常方便,所以本文就將使用Web?Component實(shí)現(xiàn)防篡改水印,感興趣的小伙伴可以了解下
2023-12-12