Move the uniapp applet page to the specified position and fix the navigation bar
first effect picture
1. Get a navigation bar first
Simply paste the code css will not paste
:class is a simple dynamic binding style, dynamically add the style you need to modify when the specified condition is met
// 是否选中对应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. We need to get the distance from the top of the navigation bar
To get this distance is to get it in onLoad()
The api of uni.createSelectorQuery() is used here, for details, please refer to the official document ( official document )
const query = uni.createSelectorQuery().in(this);
query
.select('.goods-tab') // 大家可以注意一下 .goods-tab 是我商品列表导航栏最外层的一个类名
.boundingClientRect(data => {
// 这边大家可以自行输出data看看主要包含了什么数据
// 刚进入页面goodsTab与顶部的距离
// goodsTabOffSetTop 是我在data中已经声明的一个字段，后期进行一个判断逻辑使用
this.goodsTabOffSetTop = data.top;
}).exec();
3. We need to monitor page scrolling
The APIs of onPageScroll() and uni.createSelectorQuery() are used here, and the collective can view the official documents ( official documents )
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. Roughly the whole process has actually been completed
A style for the fixed navbar
Note that the top here is 0, but what we want is not 0, so I dynamically bind the value of top on the view tag
<view class="goods-tab" :class="{ 'goods-tab-fixed': isFixedGoodsTab }" :style="{ top: isFixedGoodsTab ? `${goodsTabTop}px` : '' }">
.goods-tab-fixed {
position: fixed;
top: 0;
width: 100%;
}
end~
If you have any questions or inappropriateness, welcome to communicate~