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