2021-08-10

uniapp页面滚动

---

一、页面滚动事件

//注意onPageScroll和onLoad同级
	onPageScroll(e){
		//e.scrollTop为页面向上滚动的距离
	}

二、获取整个页面的高度

			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.windowHeight = res.windowHeight
				}
			});

三、元素到页面顶部的距离

    const query = uni.createSelectorQuery().in(this);
	query.select('#pingtuanbox').boundingClientRect(data => {
		this.ptScroll = data.top
	}).exec();

四、小例子，吸顶功能

当元素向上滑动到顶部时固定在页面顶部

1要计算出元素到页面顶部的距离
2.计算滚动的距离是否大于页面到顶部的距离
3.给元素添加定位功能

		mounted(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#scrollView').boundingClientRect(data => {
					this.myScroll = data.top * 2 
			   }).exec();
        }
        onPageScroll(e) {
			 if (e.scrollTop > this.myScroll) {
			 //可使用此字段判断 
			 // :style="isTop == 1 ? 'position:fixed;z-index:9;top:0;background-color:#fff' :''"
				this.isTop = 1
			} else {
				this.isTop = 0
			}
		}