如何实现非组件式tab切换效果

z_星河

已于 2023-02-01 16:11:48 修改

阅读量106

点赞数

分类专栏： JS 文章标签：前端 vue.js javascript

于 2023-02-01 16:08:52 首次发布

本文链接：https://blog.csdn.net/z_2183441353/article/details/128835030

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文仅讲述了个别不用组件tab切换但要有同样功能的案例

一、组件tab是什么？

Tabs 标签该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。（众所周知更简单方便）

（具体参考链接：Tabs 标签 | uView 2.0）

二、非组件tab切换---使用步骤

1.HTML部分

代码如下（示例）：

<div class="center_botts flex_column">
			<p class="center_box">机构列表</p>
			<div class="center_botts_bottom">
				<div class="boxs_left flex_column">
					<div :class="current==index?'active':'org'" v-for="(item,index) in datas" :key="index"
						@click="tabClick(item,index)">{{item.branch}}</div>
				</div>
				<div class="boxs">
					<div class="boxs1" v-for="(item,index) in leaderList" :key="index" v-show="current==index">
						<img :src="hrefURL+item.images" alt="" class="boxs_img">
						<a href="./html/organization.html" class="center_bott_right">{{item.name}}</a>
					</div>
				</div>
			</div>
		</div>

2.JS部分

代码如下（示例）：

<script type="text/javascript">
	var vm = new Vue({
		el: '#content',
		data: {
			hrefURL: hrefURL,
		    datas: [], //机构列表内容
			leaderList: [], //机构内容
			current: 0
		},
		mounted() {
			this.initData()
		},
		methods: {
		    //首页内容
			initData() {
				let sendData = {};
				$.ajax({
					type: "post",
					url: hrefURL + '/api/index/index',
					data: sendData,
					success: (res) => {
						if (res.code == 1) {
							// console.log(res);
							 this.datas = res.data.branch
							 if (res.data.branch.length > 0) {
							 	this.tabClick(res.data.branch[0], 0)
							 }
						} else {
							layer.msg(res.msg);
						}
					},
					error(err) {
						layer.msg('网路出现故障；请稍后再试');
					}
				});
			},
			tabClick(item, index) {
			 	let sendData = {};
			 	$.ajax({
			 		type: "post",
			 		url: hrefURL + '/api/index/branch',
			 		data: sendData,
			 		success: (res) => {
			 			if (res.code == 1) {
			 				// console.log(res);
			 				this.leaderList = res.data
			 				this.current = index
			 				// console.log(this.current);
			 			} else {
			 				layer.msg(res.msg);
			 			}
			 		},
			 		error(err) {
			 			layer.msg('网路出现故障；请稍后再试');
			 		}
			 	});
			 },
		},


	})



</script>

3.CSS部分

#content .center_botts {
	width: 90%;
	margin: 30px auto 0;
	font-size: 26px;
	color: #000;
	font-weight: bold;
}

#content .center_botts .center_box {
	/* color: #164A92; */
	/* 	background-image: -webkit-linear-gradient(bottom, #164A92, #1a92ca);

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent; */
	width: 7%;
	color: #fff;
	background: linear-gradient(#164A92, #1a92ca);
	padding: 10px;
	text-align: center;
}

.boxs1 .center_bott_right {
	color: #000;
	margin-left: 30px;
	font-weight: normal;
	font-size: 22px;
	height: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 10;
	/*10表示只显示10行*/
	-webkit-box-orient: vertical;
	line-height: 30px;
}

.center_botts_bottom {
	margin-top: 10px;
	display: flex;
}

.boxs {
	width: 90%;
}

.boxs1 {
	display: flex;
}

.boxs_left {
	width: 160px;
	height: 300px;
	margin-top: 10px;
	overflow: auto;
}

.org {
	font-size: 18px;
	color: #c5c5c5;
	margin-bottom: 15px;
	cursor: pointer;
	font-weight: normal;
}

.active {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	cursor: pointer;
	color: #000;
}

.boxs_img {
	width: 450px;
	height: 300px;
	margin-left: 30px;
	float: left;
}