小程序 页面移动到指定位置将导航栏固定(uniapp)

uniapp小程序 页面移动到指定位置将导航栏固定

先上个效果图

1.先弄个导航栏出来

简单粘贴一下代码 css就不粘贴了

:class就是简单的动态绑定样式了， 在指定条件成立的情况下就动态添加你需要修改的样式

// 是否选中对应goodsTab下标
goodsTabIndex: 0,
// goodsTab固定位置
goodsTabTop: 0,
// 是否开启固定
isFixedGoodsTab: false,
// 刚进入页面tab与顶部的距离
goodsTabOffSetTop: 0

<!-- 商品列表导航栏 -->
<view class="goods-tab" :class="{ 'goods-tab-fixed': isFixedGoodsTab }" :style="{ top: isFixedGoodsTab ? `${goodsTabTop}px` : '' }">
	<view class="one-tab" v-for="(item, index) in goodsTabData" :key="index" @click="switchGoodsTab(index)">
		// 这里的goodsTabIndex === index 就是看是否选中当前tab，选中就修改样式
		// 标题
		<view class="tit" :class="{ 'tit-select': goodsTabIndex === index }">{{ item.tit }}</view>
		// isFixedGoodsTab就是是否固定商品导航栏
		// 副标题, 
		<view v-show="!isFixedGoodsTab" class="sub-tit" :class="{ 'sub-tit-select': goodsTabIndex === index }">{{ item.subTit }}</view>
		// 这个就是移动到指定位置时，我就不显示副标题了, 显示一横杠
		<view v-show="isFixedGoodsTab" :class="{ 'check-icon': goodsTabIndex === index }"></view>
	</view>
</view>

2.我们需要获取这个导航栏距离顶部的距离

获取这个距离是在onLoad()进行获取

这里使用uni.createSelectorQuery()的api，具体可以查看官方文档(官方文档)

const query = uni.createSelectorQuery().in(this);
	query
		.select('.goods-tab') // 大家可以注意一下 .goods-tab 是我商品列表导航栏最外层的一个类名
		.boundingClientRect(data => {
			// 这边大家可以自行输出data看看主要包含了什么数据
			// 刚进入页面goodsTab与顶部的距离
			// goodsTabOffSetTop 是我在data中已经声明的一个字段，后期进行一个判断逻辑使用
			this.goodsTabOffSetTop = data.top;
		}).exec();

3.我们需要监听页面滚动

这里使用 onPageScroll() 和uni.createSelectorQuery()的api， 集体可以查看官方文档(官方文档)

onPageScroll(e) {
	const query = uni.createSelectorQuery().in(this);
		query
			.select('.hearder')
 // 这里需要注意因为头部也是固定住的，所以在这里我也需要获取到头部的一个高度，
 //作为导航栏固定时距离顶部的一个距离
			.boundingClientRect(data => {
				// 获取到头部的一个高度
				const headerHeight = data.height;
				// goodsTabTop 导航栏固定位置，就是头部的高度
				this.goodsTabTop = headerHeight;
				// 是否为goodsTab开启fixed定位
				// 这里的判断我是建议大家在这里对这三个数据进行一个打印，这样有助于大家理解
				// console.log(parseInt(e.scrollTop), '1', headerHeight, '2', this.goodsTabOffSetTop, '3')
				if (parseInt(e.scrollTop) + headerHeight > this.goodsTabOffSetTop) {
					this.isFixedGoodsTab = true;
				} else {
					this.isFixedGoodsTab = false;
				}
		}).exec();
}

4.大致整个流程其实已经完成了

固定导航栏的一个样式

注意一点,此处的top为0，而我们要的并不是0，所以我是在view标签上动态绑定了top的值的

<view class="goods-tab" :class="{ 'goods-tab-fixed': isFixedGoodsTab }" :style="{ top: isFixedGoodsTab ? `${goodsTabTop}px` : '' }">

.goods-tab-fixed {
	position: fixed;
	top: 0;
	width: 100%;
}

完结~

有疑问或者不当之处欢迎交流~