【uniapp】uniapp制作滑动选项卡

最新推荐文章于 2024-07-25 08:54:13 发布

饭碗不保啊

最新推荐文章于 2024-07-25 08:54:13 发布

阅读量1.3k

点赞数 2

分类专栏： uniapp 微信小程序文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_72709530/article/details/126767582

版权

uniapp 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

微信小程序

1 篇文章 0 订阅

订阅专栏

样式：

<template>
	<scroll-view :scroll-x="true">
		<view class="content">
			<view class="box">
				<view  v-for="(item, index)  in titleList" class="title" :class="{'title1':isChange==index}" :key="index" @click="titleTap(index)">{{item}}</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				titleList:['状态','程序','阀门','视频监控','报警','主菜单'],
				isChange:'0'
			}
		},
		onLoad() {
	
		},
		methods: {
			titleTap(index){
				if(index!=this.isChange){
					this.isChange = index;
				}
			}
		}
	}
</script>

<style>
scroll-view{
	white-space: nowrap;
	/* position: fixed; */
}
.content{
	width: 115%;
	background-color: #2bb4ed;	
}
.content .box{
	height: 80rpx;
	line-height: 70rpx;
	display: flex;
	justify-content: space-around;
}
.content .title{
	font-family: 'PingFang-SC-Medium';
	font-size: 26rpx;
	color: #beecff;	
}
.content .title1{
	height: 73rpx;
	font-family: 'PingFang-SC-Bold';
	font-size: 30rpx;
	color: #ffffff;
	border-bottom: 5rpx solid #ffffff;
}
</style>