uni-app 如何实现回到页面顶部

uni-app 如何实现回到页面顶部_第1张图片

结构代码:  


 ^
 顶部

data中定义一个变量 :  isShow: false 

 onPageScroll 监听页面滚动事件: (onPageScroll 跟methods同级写)

onPageScroll(e){
  // console.log('e:',e)
 if(e.scrollTop>=200){
 // 显示
 this.isShow=true
 }else{
	// 隐藏
	this.isShow=false
}
}

这个 e 表示 滑动距离 

uni-app 如何实现回到页面顶部_第2张图片

	methods: {
		topBack(){
			uni.pageScrollTo({
				scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
				duration:300  // 滚动动画的时长
			})
		}
		}

uni-app 如何实现回到页面顶部_第3张图片

 这样,回到页面顶部就实现啦

你可能感兴趣的:(uni-app)