Vue中左右滑动的头部导航
<template>
<div class="about">
<div class="idd">
<ul>
<li :class="{'active':indexTap == index}" v-for="(item,index) in lists" :key="index" @click="indexTap = index">
{{item}}
</li>
</ul>
<div class="showBox animated bounceInDown" v-if="indexTap == 2">
范德萨范德萨
</div>
</div>
</div>
</template>
<script>
export default {
name: 'about',
data() {
return {
indexTap:0,
lists:['title01','title02','title03','title04','title05','title06','title07','title08','title09','title010']
}
}
}
</script>
<style lang="scss" scoped>
ul::-webkit-scrollbar {
display: none;
}
.active{
color:#cd1845;
font-weight: bolder;
}
.idd{
width: 100%;
overflow: hidden;
ul{
display: flex;
align-items: center;
overflow:auto;
padding-left: 0;
list-style: none;
li{
text-align: center;
font-size: 16px;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 10px;
margin: 5px;
}
}
}
</style>
以上代码中，我运用了animate.css的动画特效插件，用了弹性布局。
效果如图所示：
简单的头部导航制作完毕–大宝
