Vue中左右滑动的头部导航（极简）

最新推荐文章于 2024-08-22 15:31:06 发布

Bonnie(大宝)

最新推荐文章于 2024-08-22 15:31:06 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/weixin_40199449/article/details/102831435

版权

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的动画特效插件，用了弹性布局。