詳解微信小程序回到頂部的兩種方式
更新時(shí)間：2019年05月09日 11:25:56 作者：sxs1995
這篇文章主要介紹了詳解微信小程序回到頂部的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在做微信小程序開發(fā)時(shí)，遇到一個(gè)問題，要如何實(shí)現(xiàn)返回頂部的功能，下面就用2種方法實(shí)現(xiàn)
一,使用view形式的回到頂部
HTML：
<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
CSS：
/* 返回頂部 */
.goTop{
height: 80rpx;
width: 80rpx;
position: fixed;
bottom: 50rpx;
background: rgba(0,0,0,.3);
right: 30rpx;
border-radius: 50%;
}
JS：
// 獲取滾動(dòng)條當(dāng)前位置
onPageScroll: function (e) {
console.log(e)
if (e.scrollTop > 100) {
this.setData({
floorstatus: true
});
} else {
this.setData({
floorstatus: false
});
}
},
//回到頂部
goTop: function (e) { // 一鍵回到頂部
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '當(dāng)前微信版本過低，無法使用該功能，請(qǐng)升級(jí)到最新微信版本后重試。'
})
}
},
二.使用scroll-view形式的回到頂部
<scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
CSS：
/* 返回頂部 */
.goTop{
height: 80rpx;
width: 80rpx;
position: fixed;
bottom: 50rpx;
background: rgba(0,0,0,.3);
right: 30rpx;
border-radius: 50%;
}
JS：
data:{
topNum: 0
}
// 獲取滾動(dòng)條當(dāng)前位置
scrolltoupper:function(e){
console.log(e)
if (e.detail.scrollTop > 100) {
this.setData({
floorstatus: true
});
} else {
this.setData({
floorstatus: false
});
}
},
//回到頂部
goTop: function (e) { // 一鍵回到頂部
this.setData({
topNum: this.data.topNum = 0
});
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
微信小程序自定義導(dǎo)航欄功能的實(shí)現(xiàn)
本文介紹了微信小程序自定義導(dǎo)航欄功能的實(shí)現(xiàn)方法,首先,需要去掉原生導(dǎo)航欄,可以通過在page.json中去掉navigationBarTitleText并加上"navigationStyle":"custom"來實(shí)現(xiàn),然后,可以使用組件封裝來實(shí)現(xiàn)自定義導(dǎo)航欄的功能,感興趣的朋友一起看看吧2025-01-01
JavaScript設(shè)計(jì)模式策略模式案例分享
這篇文章主要介紹了JavaScript設(shè)計(jì)模式策略模式案例分享，策略設(shè)計(jì)模式就是指一個(gè)問題匹配多個(gè)解決方法，不一定要用到哪一個(gè)，而且有可能隨時(shí)增加多個(gè)方案2022-06-06
Javascript this 的一些學(xué)習(xí)總結(jié)
相信有C++、C#或Java等編程經(jīng)驗(yàn)的各位，對(duì)于this關(guān)鍵字再熟悉不過了。由于Javascript是一種面向?qū)ο蟮木幊陶Z言，它和C++、C#或Java一樣都包含this關(guān)鍵字，接下來我們將向大家介紹Javascript中的this關(guān)鍵字2012-08-08
javascript實(shí)現(xiàn)顯示和隱藏div方法匯總
本文章通過幾個(gè)簡(jiǎn)單的實(shí)例告訴你如何來實(shí)例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦，有需要的同學(xué)可以參考一下本文章。2015-08-08
本篇文章主要介紹了p5.js入門教程之平滑過渡(Easing)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
javascript中的this應(yīng)用非常廣泛，對(duì)js中this總是似是而非的感覺，今天小編豁然開朗，然后再次給大家談?wù)搄s中的this關(guān)鍵，感興趣的朋友跟著小編一起看看吧2016-06-06
JavaScript使用addEventListener添加事件監(jiān)聽用法實(shí)例
這篇文章主要介紹了JavaScript使用addEventListener添加事件監(jiān)聽的方法,實(shí)例分析了addEventListener方法的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
JavaScript是一種描述型腳本語言，它不同于java或C#等編譯性語言,它不需要進(jìn)行編譯成中間語言,而是由瀏覽器進(jìn)行動(dòng)態(tài)地解析與執(zhí)行。如果你不能理解javaScript語言的運(yùn)行機(jī)制，或者簡(jiǎn)單地說，你不能掌握javascript的執(zhí)行順序，那你就猶如伯樂駕馭不了千里馬2015-08-08
對(duì)于js中的對(duì)象的深拷貝在項(xiàng)目的開發(fā)中比較常用到,本文就來介紹一下JS深拷貝的4種實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
本文介紹了如何使用微信小程序開發(fā)一個(gè)日程預(yù)約系統(tǒng),該系統(tǒng)包括頂部日期選擇器、中部的canvas繪制區(qū)和底部的數(shù)據(jù)回顯區(qū),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-02-02