微信小程序實現一鍵回到頂部功能
做微信小程序的時候遇到瞭這個問題要求列表頁要做一個實現上拉一定距離後顯示一鍵返回頂部的點擊可以一下子回到列表頂部。
遇到問題不要慌
面向百度編程 —-上代碼
.wxml文件代碼
<!-- 返回頂部 -->
<view class='goTop' hidden='{{!scrollTop}}' bindtap="goTop">
返回頂部 //這裡可以換成一個圖標
</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({
/**
* 頁面的初始數據
*/
data: {
scrollTop: false,
},
//回到頂部
goTop: function (e) {
// 一鍵回到頂部
if (wx.pageScrollTo) {
wx.pageScrollTo({ scrollTop: 0 })
} else {
wx.showModal({
title: '提示', content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本後重試。'
})
}
},
// 獲取滾動條當前位置
onPageScroll: function (e) {
if (e.scrollTop > 200) {
this.setData({
scrollTop: true
});
} else {
this.setData({
scrollTop: false
});
}
}
})
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。