uniapp头部导航加滑动切换

最新推荐文章于 2024-07-19 10:35:16 发布

草台班班长_Ndie

最新推荐文章于 2024-07-19 10:35:16 发布

阅读量492

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/m0_46978096/article/details/119773956

版权

本文展示了一个使用Vue.js实现的滑动切换组件和导航栏联动的示例。通过`v-for`指令动态渲染导航条目，利用`v-if`和`v-show`控制选中状态，同时监听`swiper`的`change`事件来更新导航栏。代码中详细定义了样式以达到预期的视觉效果，包括导航条目的激活样式和底部指示条。此示例适用于前端开发中的交互设计和页面动态效果构建。

摘要由CSDN通过智能技术生成

<template>
	<view>
		<view class="nav">
			<view v-for="(item,index) in titleList" :key="index" class="navEach">
				<view @click="changeTitle(index)">
					<view :class="item.istrue?'navNameActive':'navName'">{{item.name}}</view>
					<view class="navBottom"><view class="navActvie" v-show="item.istrue"></view></view>
				</view>
			</view>
		</view>
		
		<swiper class="swiperbox" :current="currentIndex" @change="changeCurrent">
			<swiper-item>开拍提醒</swiper-item>
			<swiper-item>飞洒发</swiper-item>
			<swiper-item>151</swiper-item>
			<swiper-item>sd23发送</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				//头部导航
				titleList:[
					{name:"开拍提醒",istrue:true},
					{name:"中拍",istrue:false},
					{name:"被超越",istrue:false},
					{name:"已领先",istrue:false},
				],
				currentIndex:0,//当前滑块
			}
		},
		methods:{
			//滑块改变
			changeCurrent(e){
				this.changeTitle(e.detail.current);
			},
			//头部切换
			changeTitle(e){
				//防止多次执行
				if(e !== this.currentIndex){
					this.titleList[this.currentIndex].istrue = false;//改变旧的
					this.currentIndex = e;//滑块切换
					this.titleList[e].istrue = true;//改变新的
				}
			}
		}
	}
</script>

<style scoped>
	.nav{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
	}
	.navEach{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.navNameActive{
		font-size: 28rpx;
		color: #C42A2A;
		font-weight: 550;
	}
	.navName{
		font-size: 28rpx;
		color: #aaa;
	}
	.navBottom{
		width: 100%;
		display: flex;
		justify-content: center;
		height: 8rpx;
	}
	.navActvie{
		width: 56rpx;
		height: 4rpx;
		background-color: #C42A2A;
		border-radius: 1px;
		margin-top: 4rpx;
	}
	
	.swiperbox{
		position: absolute;
		top: 76rpx;
		left: 0;
		width: 100%;
		height: calc(100% - 76rpx);
		background-color: #2F86F6;
	}
</style>