詳解微信小程序回到頂部的兩種方式
更新時間：2019年05月09日 11:25:56 作者：sxs1995
這篇文章主要介紹了詳解微信小程序回到頂部的兩種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
在做微信小程序開發(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：
// 獲取滾動條當前位置
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: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
})
}
},
二.使用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
}
// 獲取滾動條當前位置
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了比較常見的js蒙版效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript函數(shù)apply()和call()用法與異同分析
這篇文章主要介紹了JavaScript函數(shù)apply()和call()用法與異同,結(jié)合實例形式分析了apply()和call()的功能、區(qū)別、使用方法及相關操作注意事項,需要的朋友可以參考下2018-08-08
深入理解JavaScript系列（29）：設計模式之裝飾者模式詳解
這篇文章主要介紹了深入理解JavaScript系列（29）：設計模式之裝飾者模式詳解,裝飾者用用于包裝同接口的對象,不僅允許你向方法添加行為,而且還可以將方法設置成原始對象調(diào)用（例如裝飾者的構(gòu)造函數(shù)）,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter Pattern，是作為兩個不兼容的接口之間的橋梁。這種類型的設計模式屬于結(jié)構(gòu)型模式，下文更多相關介紹需要的小伙伴可以參考一下2022-08-08
最近很多平臺都上線了顯示用戶的位置信息的功能，那么這是如何做到的， 據(jù)說這個位置信息的準確性在通信網(wǎng)絡運營商那里？本文將來探究一下2022-05-05
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)拉鏈式的滑動驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
用js來刷新當前頁面保留參數(shù)的具體實現(xiàn)
本文為大家詳細介紹下如何使用js來刷新當前頁面保留參數(shù)，下面有個不錯的實現(xiàn)大家可以看看2013-12-12
TypeScript 引用資源文件后提示找不到的異常處理技巧
這篇文章主要介紹了TypeScript 引用資源文件后提示找不到的異常處理,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了微信小程序發(fā)送短信驗證碼完整實例，實現(xiàn)發(fā)送短信驗證碼，帶60秒倒計時功能，無需服務器端，非常具有實用價值，需要的朋友可以參考下2019-01-01
JavaScript基于ChatGPT實現(xiàn)打字機消息回復
ChatGPT 是一個基于深度學習的大型語言模型，處理自然語言需要大量的計算資源和時間，響應速度肯定比普通的讀數(shù)據(jù)庫要慢的多，本文介紹了ChatGPT打字機消息回復實現(xiàn)原理，感興趣的同學可以跟著小編一起學習2023-05-05