uni-app页面滑动到一定位置,固定到顶部

文章描述:

uni-app页面目标板块滑动到指定模块时,指定模块吸顶效果

 

template

<template>
	<view>
		<view v-for="(item,index) in 50" :key="index">
			{{index}}
		</view>
		<view class="box" :class="temp==1?'boxStyle':''">000</view>
		<view v-for="(item,index) in 50" :key="index">
			{{index}}
		</view>
	</view>
</template>

script

export default {
    data() {
        return {
            temp:0,
            myScroll:0,
        }
    },
    onLoad(){
      uni.createSelectorQuery().select('.box').boundingClientRect(res=>{
            this.myScroll =res.top;
        }).exec();
    },
    onPageScroll(e){
        if(e.scrollTop > this.myScroll){
            this.temp= 1
        }else{
            this.temp= 0
        }
    }
}

style

.boxStyle{
	position: fixed;top: 0;left: 0;
}

 

发布时间:2023/01/10

发表评论