vue中使用swiper做無縫滾動(走馬燈)效果

<swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item, index) in lists.appResource" :key="index">
        <img :src="upload + item.info" alt="" />
        <header v-if="item.title">{{ item.title ? item.title : "" }}</header>
        <p v-if="isShow && item.description">{{ item.description ? item.description : "" }}</p>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

swiperOptions: {
          slidesPerView: "auto",
          spaceBetween: 40,
          loop: true,
          speed: 4000,
          autoplay: {
            delay: 1, //自動切換的時間間隔
            disableOnInteraction: false,
            pauseOnMouseEnter: true, //鼠標置於swiper時暫停自動切換，鼠標離開時恢復自動切換。
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
    },
computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },


這里發現使用css無效，后改用在mounted中修改

.swiper-container .swiper-wrapper{
  -webkit-transition-timing-function: linear !important; /*之前是ease-out*/
  -moz-transition-timing-function: linear !important;
  -ms-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

mounted() {
    let this_swiper = this.$refs.mySwiper.$swiper
    this_swiper.$wrapperEl[0].style['transition-timing-function'] = 'linear'
  },

 以上代碼中設置 speed: 4000, transition-timing-function：linear 。還有一個想實現的功能就是鼠標置於swiper時暫停自動切換，鼠標離開時恢復自動切換，pauseOnMouseEnter: true。這時候發現，鼠標移入swiper后沒有立即停止，而是延遲后才停止。原因是：鼠標移入后要等當前的swiper移動完后才停止，swiper的移動是靠控制transform的參數來實現的。

//6.6.2之前的版本需要通過代碼實現此功能

this_swiper.el.onmouseover = function(){　

　　this_swiper.autoplay.stop()

}

this_swiper.el.onmouseout = function(){

　　this_swiper.autoplay.start();

}

 

transform  2D 的集合 matrix 。

matrix( 1 , 0 , 0 , 1 , 0 , 0 ) 的參數6位數

1. 默認值為1，定義的是 scaleX 通過設置 X 軸的值來定義縮放。值：>=0
2. 默認值為0，定義的是 skew 定義 2D 傾斜
3. 默認值為0，定義的是 rotate 定義2D 旋轉角度
4. 默認值為1，定義的是 scaleY 通過設置 Y 軸的值來定義縮放。值：>=0
5. 默認值為0，定義的是 translateX 通過設置 X 軸的值來定義左右位移。
6. 默認值為0，定義的是 translateY 通過設置 Y 軸的值來定義上下位移。