scroll-top、scroll-left 设置滚动条竖向或横向位置:
以scroll-top 举例:
<scroll-view scroll-y="true" :scroll-top="scrollTop" class='nav-box' @scroll="scroll"> </scroll-view>
<view @tap="goTop">点击回到顶部</view>
<script>
export default{
data(){
return{
scrollTop:0,
old: { scrollTop: 0 },
}
},
methods:{
scroll : function(e) {
this.old.scrollTop = e.detail.scrollTop
},
goTop : function(){
this.scrollTop = this.old.scrollTop
this.$nextTick(function(){
this.scrollTop=0;
});
}
}
}
</script>
官方示例方法: scroll事件监听会监听滚动条处于的位置(e.detail),将滚动条滚动的位置保存在old.scrollTop,当点击 回到顶部时, 将old.scrollTop赋值给scrollTop,视图会发生重新渲染,当视图渲染结束,接着触发 this.$nextTick,scrollTop被赋值为0,视图会再次渲染并回到顶部
如下直接赋值也可达到同样效果
scroll : function(e) {
this.scrollTop = e.detail.scrollTop
},
goTop : function(){
this.scrollTop = 0
}