<scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}' bindscroll="scrolltoupper">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
<view>9</view>
<view>10</view>
</scroll-view>
<view class='goTop' hidden='{{!floorstatus}}' bindtap="returnTop">顶部</view>
采用 scroll-view 标签形式的回到顶部,通过 scroll-top获取可滚动区块向下滚动的距离。bindscroll 滚动时触发,scroll-with-animation:在设置滚动条位置时使用动画过渡,一般默认为false。小程序开发文档
CSS:
page{
width: 100%;
height: 100%;
}
scroll-view{
height: 100%;
width: 100%;
}
view{
width: 100%;
height: 200px;
text-align: center;
line-height: 200px;
font-weight: 600;
}
view:nth-child(odd){
background-color: red;
}
.top{
width: 50px;
height: 50px;
position: fixed;
right: 10px;
bottom: 10px;
z-index: 1;
background-color: yellow;
color: red;
text-align: center;
line-height: 50px;
}
JS:
data: {
topNum: 0
},
// 获取滚动条当前位置
scrolltoupper:function(e){
console.log(e)
var floorstatus = e.detail.scrollTop > 100 ? true : false
this.setData({
floorstatus: floorstatus
})
// if (e.detail.scrollTop > 100) {
// this.setData({
// floorstatus: true
// });
// } else {
// this.setData({
// floorstatus: false
// });
// }
},
//回到顶部
returnTop: function () {
this.setData({
topNum: this.data.topNum = 0
});
},