当前位置:网站首页>uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)

uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)

2022-07-06 14:55:00 我是开心呀

滑动后tab固定到顶部
在这里插入图片描述

<template>
	<view class="topBox" :class="head==1?'topBoxStyle':''">测试固定顶部测试固定顶部</view>
</template>
<script>
	export default {
    
		data(){
    
			return{
    
				head: 0,
				myScroll:0,
			}
		},
		onLoad(e) {
    
			//获取目标板块到顶部的距离
			uni.createSelectorQuery().select('.topBox').boundingClientRect(res=>{
    
				this.myScroll =res.top;
				console.log(this.myScroll,'this.myScroll-------')
			}).exec();
		},
		methods: {
    
			onPageScroll(e){
    
				// console.log(e,'eeeee')
				if(e.scrollTop > this.myScroll){
    
					this.temp= 1
				}else{
    
					this.temp= 0
				}
			},
		}
	}
</script>
<style>
	.boxStyle{
    
		width: 100%;
		height: 80rpx;
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
	}
</style>


原网站

版权声明
本文为[我是开心呀]所创,转载请带上原文链接,感谢
https://haozhongping.blog.csdn.net/article/details/125635714