vue-cli-移动端web-app可滑动标题栏(类似腾讯视频精选滑动)

前沿：

---

这是好久之前的项目的需求了，需要做一个可滑动的标题栏，类似腾讯视频的导航栏，可以滑动。现在记录下来，方便以后使用。这里我并没有封装公共组件，需要的伙伴自行封装。

由于需要灵活控制（我不想写那么多的v-show,那位小伙伴有更好的解决方案，评论区留言），所以里边有引入jq,适配用的是rem.接下来上代码。

<template>
   <div id="app">
       <nav>
         <p v-for="(item,$index) in arr"
         :key="item"
         @click="toggle($index)"
         :class="{active:$index==active}"><span :class="{spanlast:$index==7}">{{item}}</span></p>
        </nav>
                <div class="main" style="display: block;">1</div>
                <div class="main">22</div>
                <div class="main">3</div>
                <div class="main">4</div>
                <div class="main">5</div>
                <div class="main">6</div>
                <div class="main">7</div>
                <div class="main">8</div>
  </div>
</template>
        <script>
export default {
  data() {
    return {
      active: 0,
      arr: [
        "联系我们",

        "安全保障",

        "组织信息",

        "备案信息",

        "联系大家",

        "联系朋友",

        "我的梦想",

        "挑战自我"
      ]
    };
  },
  methods: {
    toggle: function(index) {
      this.active = index;
      var mains = document.getElementsByClassName("main");
      for (var i = 0; i < mains.length; i++) {
        mains[i].style.display = "none";
        if (index == i) {
          mains[i].style.display = "block";
        }
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
            #app {
                width: 100%;
                border: 1px solid green;
            };
            #app nav {
                display: flex;
                height: .5rem;
                background: #ccc;
                overflow: auto;
                position: fixed;
                top: 0px;
            }

            

            #app p {

                font-size: .16rem;

                text-align: center;

                flex-shrink: 0;

                padding: 12px 0px;

            }

            

            span {

                padding: 0 0.2rem;

                border-right: 1px solid blue;

            }

            

            .spanlast {

                padding: 0 0.2rem;

                border-right: 1px solid #ccc;

            }

            

            #app p.active {

                color: red;

            }

            

            .main {

                width: 100%;

                border: 1px solid red;

                display: none;

                font-size: .12rem;

                word-break: break-all;

                margin-top: .5rem;

            }

        </style>

结束语：

这是全部代码，若有小伙伴觉得有什么改进的地方，评论区评论。