uniapp 小程序 滚动条遇到的坑

uniapp 滚动条与最高级图层的坑

在主页面中使用滚动条，当更高图层覆盖页面时，出现滚动条的时候，我们滑动最高级图层的滚动条，其实主页面的滚动条也跟着滑动（最高级图层滚动条滑到顶部，退出最高级图层时，主页面的滚动条也在最顶部），解决方法也很简单，只需要监听滚动条的位置即可，uniapp中有onPageScroll(e)这个方法实时监听滚动条的位置，我们只需在展开最高级图层的时候记录一次，把它赋值到另一个变量，然后在关闭最高级图层的时候把它赋值回去即可，上代码

//监听滚动条的位置
onPageScroll(e) {
		this.scrollTopTmp = e.scrollTop  //记录当前位置
		// console.log('onPageScroll',e.scrollTop)	
	}，
//展开最高级图层
fold(val){
		this.scrollTop = this.scrollTopTmp;  //将记录的值赋值给另一个变量
		console.log('fold.scrollTop ===' ,this.scrollTop)
		uni.pageScrollTo({	
			scrollTop: 0, //距离页面顶部的距离	
			duration: 0
		});		
		},
// 隐藏扩展内容
hideExp(){
	//坑！关闭的时候这里会有问题（就算它默认scrollTop是144什么的），只需加个定时器即可，这里建议使用nextTick
	/* var timer = setTimeout(() =>{
	uni.pageScrollTo({
		duration:0,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
		scrollTop: this.scrollTop,//滚动到目标位置
	})
	clearTimeout(timer)
	},100) */
	
	this.$nextTick(function(){
		uni.pageScrollTo({
			duration:0,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
			scrollTop: this.scrollTop,//滚动到目标位置
		})
	})
	console.log('hideExp scrollTop is == ',this.scrollTop)
},