本文仅讲述了个别不用组件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;
}
总结
以上就是今天要讲的内容,本文仅仅简单介绍了在遇到需要非组件式tab切换时的场景该如何应用,当然大多数情况下应用的都是组件更为简单方便。