小程序的scroll-view组件可以实现返回顶部功能,他有两个重要属性如下:
1.scroll-top:number类型
2.bindscroll:EventHandle(事件处理)
具体使用如下:
<scroll-view class="scroll" scroll-y="true"scroll-with-animation='true' scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun">
<view>........</view>
</scroll-view>
js:
data:{
// 返回顶部
scrollTop: {
scroll_top: 0,
show: false
}
}
// 返回顶部
scrollTopFun:function(e){
var that=this;
if(e.detail.scrollTop>100){
that.setData({
'scrollTop.show':true
})
}else{
that.setData({
'scrollTop.show': false
})
}
},
goTopFun:function(res){
var top = this.data.scrollTop.scroll_top;
if(top==1){
top=0
}else{
top=1
}
this.setData({
'scrollTop.scroll_top':top
})
}
注意事项:scroll-view组件必须有滚动方向如:scroll-y="true",以及要设置该组件的高度height
效果图如下: