实现横向滑动
当然了这种效果很多方法可以实现,以下这种是纯css来启动
废话不多说往下看:
效果图
代码
<template>
<div class="lateral-sliding">
<div class="lateral-sliding-item" v-for="(item,index) in items" :key="index">
<div class="each-img"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
items: 3
}
}
}
</script>
<style scoped>
.lateral-sliding {
display: flex;
overflow-y: hidden;
overflow-x: scroll;
}
.lateral-sliding-item {
display: flex;
margin-right: 8px;
background-color: yellow;
}
.each-img {
width: 150px;
height: 88px;
}
</style>
tab切换渲染
1 对应的点击内容自定义
效果图
代码
!<template>
<div class="main">
<div>
<div class="cont">
<ul>
<!-- index == num?'active':''" -->
<li
@click="btnclick(index)"
:class="{ active: index == num }"
v-for="(item, index) in list"
:key="index">
{
{
item}}
</li>
</ul>
</div>
<div v-show="this.num==0">000000</div>
<div v-show="this.num==1">111111</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
"儿童科",
"妇产科",
"肿瘤科",
"心脑血管",
"中医科",
"西医科",
"儿童科",
"妇产科",
"肿瘤科",
"心脑血管",
"中医科",
"西医科",
],
num: 0,
};
},
created() {
},
methods: {
btnclick(index) {
this.num = index;
},
},
};
</script>
<style lang="less" scoped>
.main {
.title {
font-size: 0.18rem;
font-weight: 700;
color: #000;
height: 0.4rem;
line-height: 0.4rem;
background-image: linear-gradient(#f0fffc, #fff);
padding-left: 0.09rem;
padding-top: 0.05rem;
}
.cont {
margin: 0 0.1024rem;
display: flex;
overflow-y: hidden;
overflow-x: scroll;
padding-bottom: 0.1rem;
ul {
display: flex;
li {
float: left;
margin-right: 0.08rem;
text-align: center;
line-height: 0.25rem;
width: 0.7rem;
height: 0.25rem;
border-radius: 0.13rem;
font-size: 0.13rem;
color: #666666;
background: #f8f8f8;
}
}
.active {
float: left;
margin-right: 0.08rem;
text-align: center;
width: 0.7rem;
height: 0.25rem;
line-height: 0.25rem;
border-radius: 0.13rem;
font-size: 0.13rem;
color: #3ebfa0;
background: #e6f8f5;
border: 1px solid #01cca6;
}
}
}
</style>
2 对应的内容是接口返回的
- 一般接口返回都是以这种接口来进行返回给我们
[
{
title:'tabA标签',child:[{
},{
}]},
{
},{
}
]
常规的话我们是渲染2次哈,如一下操作
但是转折来了 这种的话如果遇到不好调的样式问题需要单独开一个div
请看一下代码
我们定义一个num在data里面 在点击的时候把渲染的index赋值过去
这个意义是默认显示索引值为0 的值 点击时依次显示
!<template>
<div class="main">
<div>
<div class="cont">
<ul>
<li
@click="btnclick(index)"
:class="{ active: index == num }"
v-for="(item, index) in list"
:key="index">
{
{
item}}
</li>
</ul>
</div>
<div v-for="(item1,index1) in item[num].child" :key="index1"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [{
child:[]}],//这个child:[]对应的是你的里面的子
num: 0,//就是默认显示第一个 点击显示其他的
};
},
methods: {
btnclick(index) {
this.num = index;
},
},
};
</script>
<style lang="less" scoped>
.main {
.title {
font-size: 0.18rem;
font-weight: 700;
color: #000;
height: 0.4rem;
line-height: 0.4rem;
background-image: linear-gradient(#f0fffc, #fff);
padding-left: 0.09rem;
padding-top: 0.05rem;
}
.cont {
margin: 0 0.1024rem;
display: flex;
overflow-y: hidden;
overflow-x: scroll;
padding-bottom: 0.1rem;
ul {
display: flex;
li {
float: left;
margin-right: 0.08rem;
text-align: center;
line-height: 0.25rem;
width: 0.7rem;
height: 0.25rem;
border-radius: 0.13rem;
font-size: 0.13rem;
color: #666666;
background: #f8f8f8;
}
}
.active {
float: left;
margin-right: 0.08rem;
text-align: center;
width: 0.7rem;
height: 0.25rem;
line-height: 0.25rem;
border-radius: 0.13rem;
font-size: 0.13rem;
color: #3ebfa0;
background: #e6f8f5;
border: 1px solid #01cca6;
}
}
}
</style>