uni-app tabs粘性定位

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>