1-Tab滑动选项卡

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Tab滑动选项卡</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
    <style>
        html,body{ touch-action: none; }
        ul{ list-style: none;}  
      .navlist {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid rgba(151, 151, 151, 0.1);
        position: relative;
      }
      .navli {
        padding: 10px 0px;
        text-align: center;
        float: left;
        margin: 0 1.2rem;
      }
      .navli i {
        font-style: normal;
        font-size: 16px;
      }
      .activeT {
        color: #00ba6b;
        padding-bottom: 0.3rem;
        border-bottom: 2px solid #00ba6b;
      }
      .swiper_con {
        width: 100%;
        margin-bottom: 40px;
        position: relative;
      }
      .choosegrand {
        position: absolute;
        top: -3;
        right: 0;
      }
      .show {
        display: block;
      }
      .none {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="navlist">
        <ul>
          <li
            class="navli"
            v-for="(item,index) in navList"
            :class="{'activeT':nowIndex===index}"
            @click="tabClick(index)"
          >
            <i>{{ item.name }}</i>
          </li>
        </ul>
      </div>
      <div class="swiper-container swiper_con">
        <div class="swiper-wrapper">
          <!-- 第一个swiper -->
          <div class="swiper-slide" ref="viewBox">1111</div>
          <!-- 第二个swiper -->
          <div class="swiper-slide">2222</div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data: {
        navList: [{ name: "滑动选项标题1" }, { name: "滑动选项标题2" }],
        nowIndex: 0
      },
      mounted() {
        var that = this;
        that.mySwiper = new Swiper(".swiper-container", {
            initialSlide: 0,
            autoplay: false,
            keyboardControl: true,
            autoHeight: true,
            observer: true,
            observeParents: true,
            on: {
                slideChangeTransitionStart: function(){
                    //console.log(that.mySwiper.activeIndex);
                    that.nowIndex = that.mySwiper.activeIndex;
                },
            },
        });
      },
      methods: {
        tabClick(index) {
          this.nowIndex = index;
          this.mySwiper.slideTo(index, 1000, false);
        }
      },
    });
  </script>
</html>
最后编辑于：2019.05.24 11:01:29