uni-app tabs粘性定位
<template>
<view>
<!-- 顶部banner图 -->
<view class="ding">banner</view>
<!-- tab 滑动 -->
<view :class="{'st':true,'sticky-fixed':isF}">
<!-- tab部分 -->
<swiper class="ct_tab">
<swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index" class="ct_item" @click="clickCtTab(index)">
<text v-text="item.title"></text>
</swiper-item>
</swiper>
</view>
<!-- 内容 -->
<view class="xiala">
<!-- 内容信息 -->
<view v-if="tabCur===0">
<view>zz</view>
</view>
<view v-if="tabCur===1">
<view>hh</view>
</view>
<view v-if="tabCur===2">
<view>zs</view>
</view>
<view v-if="tabCur===3">
<view>ls</view>
</view>
<view v-if="tabCur===4">
<view>ww</view>
</view>
<view v-if="tabCur===5">
<view>ln</view>
</view>
<view v-if="tabCur===6">
<view>hh</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 下拉固定
yuanH: uni.upx2px(200),
isF: false,
// 滑动tab
tabCur:0,
tabList:[
{
title:'zz',
},{
title:'hh',
},{
title:'zs',
},{
title:'ls',
},{
title:'ww',
},{
title:'ln',
},{
title:'hh',
}
],
};
},
onPageScroll(e) {
//#ifdef H5
this.isF = true
// #endif
// #ifndef H5
if (this.yuanH > e.scrollTop) {
this.isF = false
} else {
this.isF = true
}
// #endif
},
methods:{
clickCtTab(ctCur){
this.tabCur = ctCur
console.log('点击了--->'+this.tabCur)
}
},
};
</script>
<style lang='scss' scoped>
/* 顶部 banner */
.ding {
height: 200rpx;
background-color: #007AFF;
}
.st {
height: 90rpx;
width: 750rpx;
background-color: #fff;
z-index: 999;
/* top: 300upx; */
}
.sticky-fixed {
/* #ifdef H5 */
position: sticky;
top: 44px;
/* #endif */
/* #ifndef H5 */
position: fixed;
top: 0;
/* #endif */
z-index: 999;
}
.xiala {
height: 1500px;
background-color: #eee;
padding-top: 100rpx;
}
/* 滑动tab */
.ct_tab{
width: 698upx;
height: 90rpx;
margin: 0 auto;
/* padding: 30upx 0; */
font-size: 28upx;
/* font-weight: bold; */
color: #c0c8d0;
white-space: nowrap;
display: flex;
overflow: hidden;
}
.ct_item{
width: 150upx;
padding: 20upx 0;
display: inline-block;
}
.ct_item text{
padding: 20upx 0;
}
.ct_active{
color:#007AFF;
font-weight: bold;
}
.ct_active text{
border-bottom: 2px solid #007AFF;
}
swiper{
width:100%;
}
swiper-item{
width: 150upx !important;
}
</style>