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%;
}
完结~
有疑问或者不当之处欢迎交流~