移動端入庫，使用cubeUI框架入坑記錄-實現（左右滑動切換TabBor，點擊切換TabBor）

tarbar中的cube-scroll標籤裏面嵌套cube-upload，cube-upload的刪除圖片事件觸發倆次，以下是解決方案

引用vue-awesome-swiper插件

安裝

npm install vue-awesome-swiper --save-dev

在vue中引入

    進入maim.js文件
    css需要自己在網上下載到本地
    import 'swiper/dist/css/swiper.css'
    在需要插件的頁面引入下面這個
    import vueSwiper from 'vue-awesome-swiper'
    
 

 

<!-- 前言：必須引入swiper的css與js --> 

   <div>
    <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>
<script>
  export default {
    name: "swiper",
    data() {
      return {
        navList:[
          {name:'熱門答疑'},
          {name:'北清狀元'}
        ],
        nowIndex:0,
      }
    },
    methods: {
      tabClick(index){
        this.nowIndex = index
        // 在Loop模式下Swiper切換到指定slide。切換到的是slide索引是realIndex
        this.mySwiper.slideToLoop(index,1000,false)
      },
    },
    mounted() {
      var _this=this
      _this.mySwiper = new Swiper('.swiper-container',{
          // 設置爲true 則開啓loop模式
          loop: true,
          //設定初始化時slide的索引。設置爲0後，Swiper初始化時realIndex成了第三個
          initialSlide:0,
          autoplay:false,
          keyboardControl:true,
          autoHeight:true,
          observer:true,
          observeParents:true,
          //引入的swiper爲3之後的版本
          onSlideChangeStart:function(){
            // console.log(_this.mySwiper.activeIndex)
            _this.nowIndex=_this.activeIndex
          }
          //引入的版本爲4之後的版本
           on: {
              slideChangeTransitionStart: function() {
              _this.nowIndex = _this.realIndex
              },
          },
       });
    } 
}
</script>
<style>
.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: .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>