uni-app 简单模拟一下选项卡

最新推荐文章于 2023-12-26 12:25:09 发布

青田。

最新推荐文章于 2023-12-26 12:25:09 发布

阅读量193

点赞数

分类专栏： uniapp vue 文章标签： html vue.js

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/125464511

版权

uniapp 同时被 2 个专栏收录

26 篇文章 4 订阅

订阅专栏

vue

26 篇文章 3 订阅

订阅专栏

这篇博客详细介绍了如何使用Vue.js实现点击切换的效果，而非滑动切换。通过示例代码展示了如何创建一个包含四个选项（首页、新闻、类型、产品）的视图，并利用v-for指令动态渲染及v-show控制显示内容。当用户点击某个选项时，对应的视图内容会显示，其他则隐藏。代码中使用了类选择器‘.active’来突出选中状态，并提供了样式定义。

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

这是点击切换，不能滑动切换哟

一、效果

二、代码

<template>
	<view>
		<view class="flex">
			<view v-for="(v,i) in tabsArr" @tap="tabIdx=i"
			:class="[{'active':i == tabIdx}]">
				{{v}}
			</view>
		</view>
		<view class="cont" v-for="(item,index) in tabsArr" v-show="index==tabIdx">
			这是<text>{{item}}</text>的内容
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsArr:[
					'首页','新闻','类型','产品'
				],
				tabIdx:0
			}
		}
	}
</script>
<style lang="less">
.active{
	background-color: pink;
	color: #007AFF;
	border-bottom: 1px solid red;
}
.flex{
	display: flex;
	padding: 20rpx;
	view{
		margin-left: 20rpx;
	}
}
.cont{
	width: 500rpx;
	height: 200rpx;
	line-height: 200rpx;
	text-align: center;
	background-color: #C0C0C0;
	text{
		color: red;
	}
}
</style>