uni-app顶部导航栏下拉滑动固定到屏幕顶部

╰半夏微凉° 2022-12-23 09:53 239阅读 0赞

示例图片  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]

代码

<template>
    	<view style="display: flex;flex: row; position:fixed; left: 0; width: 100%; top: 30;z-index: 999;">
    		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
    			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in statusList" :key="index" @tap="tabSelect" :data-id="index">
    				{ { item}}
    			</view>
    		</scroll-view>
    	</view>
    </template>
    <script>
    	export default { 
    		components: { 
    		},
    		data() { 
    			return { 
    				TabCur: 0,
    				scrollLeft: 0
    			}
    		},
    		methods: { 
    			tabSelect(e) { 
    				this.TabCur = e.currentTarget.dataset.id;
    				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
    				console.log(this.TarCur)
    			},
    		}
    	}
    </script>
    <style>
    
    /* ================== 导航栏 ==================== */
    
    .nav { 
    	white-space: nowrap;
    }
    
    ::-webkit-scrollbar { 
    	display: none;
    }
    
    .nav .cu-item { 
    	height: 90upx;
    	display: inline-block;
    	line-height: 90upx;
    	margin: 0 10upx;
    	padding: 0 20upx;
    }
    
    .nav .cu-item.cur { 
    	border-bottom: 4upx solid;
    }
    .text-green,
    .line-green,
    .lines-green { 
    	color: #39b54a;
    }
    .bg-white { 
    	background-color: #ffffff;
    	color: #666666;
    }
    .nav .cu-item.cur { 
    	border-bottom: 4upx solid;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/e771900854b241c8afcd59a2112ba9d1.png