吸顶功能的实现

最新推荐文章于 2024-06-13 19:39:22 发布

LAN354

最新推荐文章于 2024-06-13 19:39:22 发布

阅读量199

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_61728046/article/details/127476822

版权

功能实现：

一般开发页面时，经常会遇到吸顶的问题。那么吸顶的功能如何实现呢？

一、vue页面代码实现

<view :class="[(isFixedTop) ? 'fixedTop' : '']" id="box" class="box bgwhite">
    <view class="m-lr-30 row just-btw p-tb-30">
        <view class="row alignitems">
            <image src="../../static/quanbu_icon.png" mode="aspectFit" style="width:40rpx;height:40rpx;"></image>
            <view class="f30 weight500 m-l-20">全部品牌</view>
        </view>
    </view>
</view>

二、css

.fixedTop{
	position: fixed;
	width:100%;
	top:0;
	left: 0;
	z-index: 999;
}

三、js处理

data(){
	return{
		isFixedTop:false,
	}
},
onLoad(){
	uni.pageScrollTo({
		scrollTop:0,
		duration:0
	})
	setTimeout(()=>{
		this.GetTop()
		// this.aaa()
	},1000)
},
//监测页面滑动
onPageScroll(e) {
	if(e.scrollTop > this.Topdistance){
		this.isFixedTop = true
	}else{
		this.isFixedTop = false
	}
},
methods:{
	GetTop(){
		// 获取元素距离顶部的距离
		var _this=this
		uni.getSystemInfo({
			success:(resu)=>{
				const query = uni.createSelectorQuery()
				query.select('#box').boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec(function(res){
					_this.Topdistance=res[0].top
					
				})
			},
			fail:(res)=>{}
		})
	},
}