利用原生HEML+CSS实现滑动导航

版权声明：1.版权归原作者Moment ° 回忆 ✨所有； 2.未经原作者允许不得转载本文内容，否则将视为侵权； 3.转载或者引用本文内容请注明来源及原作者； 4.对于不遵守此声明或者其他违法使用本文内容者，本人依法保留追究权等。 https://blog.csdn.net/qq_35366269/article/details/82705507

代码如下： 

<template>
    <!--滑动导航-->
  <div>

    <div class="photo-header">
      <ul>
        <li v-for="item in menuBar" :key="item.id">
          <a href="javascript:;" >{{item.title}}</a>
        </li>

      </ul>
    </div>


  </div>
</template>

<script>
    export default {
        name: "SlidingNavigation",
      data(){
        return {
          menuBar:[
            {
              title:"家具生活",
              id:14
            },
            {
              title:"摄影设计",
              id:15
            },
            {
              title:"明星美女",
              id:16
            },
            {
              title:"空间设计",
              id:17
            },
            {
              title:"户型装饰",
              id:18
            },
            {
              title:"广告摄影",
              id:19
            },
            {
              title:"摄影学习",
              id:20
            },
            {
              title:"摄影器材",
              id:21
            },
            {
              title:"明星写真",
              id:22
            },
            {
              title:"青春甜美",
              id:23
            },
            {
              title:"古典美女",
              id:24
            },
          ],
        }
      },
    }
</script>

<style scoped>


  .photo-header li {
    /*去除li标签前面的小圆点*/
    list-style: none;
    /*行内块标签*/
    display: inline-block;
    margin-left: 10px;
    height: 30px;
  }

  .photo-header ul {
    /*强制不换行*/
    white-space: nowrap;
    /*表示如果溢出框，则应该提供滚动机制。*/
    overflow-x: auto;
    padding-left: 0px;
    margin: 5px;
  }

</style>

效果如下：