小程序实现返回顶部

时间:2024-04-01 12:16:54

小程序的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

效果图如下:

小程序实现返回顶部