vue-awesome-swiper輪播插件的使用方法（程式碼）

這篇文章帶給大家的內容是關於vue-awesome-swiper輪播插件的使用方法（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

行動裝置輪播圖插件，在使用iview圖形介面插件中的carousel元件無法實現觸控滑動後，轉而使用vue-awesome-swiper插件

1.npm安裝

npm i vue-awesome-swiper -S

我這裡安裝的是下面的這個版本

#2.使用

• 全域導入：

import Vue from 'vue'
import vueSwiper from 'vue-awesome-swiper'
/* 样式的话，我这里有用到分页器，就在全局中引入了样式 */
import 'swiper/dist/css/swiper.css'
Vue.use(vueSwiper);

• 元件引入

#

import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
components: {
  swiper,
  swiperSlide
},

• 在template中使用

<swiper>
  <swiper-slide>
    <img  src="/static/imghw/default1.png" data-src="item.image" class="lazy" alt="vue-awesome-swiper輪播插件的使用方法（程式碼）" >
  </swiper-slide>
  <!-- 常见的小圆点 -->
  <p></p>
</swiper>
<!-- 显示数字 -->
<p>{{imgIndex}}/{{detailimages.length}}</p>

• #data中設定

data() {
    const that = this;
    return {
      imgIndex: 1,
      swiperOption: {
        //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        //循环
        loop: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          /* 触摸滑动后是否继续轮播 */
          disableOnInteraction: false
        },
        //滑动速度
        speed: 800,
        //滑动方向
        direction: "horizontal",
        //小手掌抓取滑动
        grabCursor: true,
        on: {
          //滑动之后回调函数
          slideChangeTransitionStart: function() {
            /* realIndex为滚动到当前的slide索引值 */
            that.imgIndex= this.realIndex - 1;
          },
        },
        //分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      }
   };
},

3.遇見的問題

• 這個插件，在圖片只有一張時，仍然會自動捲動

這裡很需要注意的一點就是，如果你直接設定autoplay為true的話，在你觸摸滑動圖片後，他就不會再自動滾動了

/* 这里我是在使用接口请求后，对返回的数据进行判断 */
created() {
  this.$Request({
    url: '',
    method: 'get',
    success: res => {
      this.swiperOption.autoplay = res.result.data.length != 1 ? {
        delay: 1500,
        stopOnLastSlide: false,
        disableOnInteraction: false
        } : false;
     }
  })
}

• 在on裡面，監聽slideChangeTransitionStart方法時，在開始的時候，我用的是activeIndex來設定對應的索引值，這個的話，滑向下一張沒有發現問題，後面，自己試著滑向上一張圖片，就發現出現問題，這個值不對應了,使用realIndex

on: {
   slideChangeTransitionStart: function() {
      that.imgIndex = this.realIndex + 1;
   },
},

• 在swiper這個容器中，會出現滾動到最後一張圖片後就不自動滾動了，以及出現底邊的小圓點寫了後不顯示的問題

原因是因為this.commodity剛開始資料為[],後來賦值才有值，所以要先判斷this.commodity是否為空,這裡就在swiper這個容器中進行判斷，若資料長度為0，就不顯示這個容器

<swiper></swiper>

相關推薦：

##vue中如何使用swiper輪播外掛程式來實作輪播圖（程式碼分析）

有關vue-awesome-swiper外掛程式問題

以上是vue-awesome-swiper輪播插件的使用方法（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！