作者:你管我管你疯啊
代码直接贴出来,以便于大家的使用,html图片自行替换
html:
<view bindtap="goTop" class="widget-goTop" hidden='{{!floorstatus}}'>
<image src="../../image/back.png" class="bac-img"></image>
</view>
css:
/* 返回顶部 */
.widget-goTop{
position: fixed;
width: 40px;
height: 40px;
bottom: 80px;
background-color: #e5e5e5;
right: 15px;
border-radius: 50%;
padding: 4px;
box-sizing: border-box;
text-align: center;
}
.bac-img{
width: 30px;
height: 30px;
color: #999;
}
js:// 获取滚动条当前位置
onPageScroll: function (e) {
if (e.scrollTop > 200) {
this.setData({
floorstatus: true,
});
} else {
this.setData({
floorstatus: false,
});
}
},
//回到顶部
goTop: function (e) { // 一键回到顶部
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
},