在做微信小程序開發(fā)時，遇到一個問題，要如何實現(xiàn)返回頂部的功能，下面就用2種方法實現(xiàn)
十多年的扶綏網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整扶綏建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“扶綏網(wǎng)站設(shè)計”,“扶綏網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
一,使用view形式的回到頂部
HTML：
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形式的回到頂部
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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
