vue輪播圖插件之vue-awesome-swiper

binta 發布于2019-08-23 12:00 / 3080人閱讀

摘要：移動端輪播圖插件，在使用圖形界面插件中的組件無法實現觸摸滑動后，轉而使用插件安裝我這里安裝的是下面的這個版本使用全局導入樣式的話，我這里有用到分頁器，就在全局中引入了樣式組件引入在中使用常見的小圓點

移動端輪播圖插件，在使用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中使用


  
    
  
  
  


{{imgIndex}}/{{detailimages.length}}

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，就不顯示這個容器

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

webpack打包（有面試題）

純css實現瀑布流（multi-column多列及flex布局）

畫三角形

云服務器 GPU云服務器輪播圖寫輪播圖將輪播圖 php輪播圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97810.html

當大多數人對Vue理解到爐火純青的時候，是不是該思考一下怎么讓vue頁面騷氣起來

寫在前面當大多數人Vue理解的爐火純青的時候，你應該思考怎么讓vue頁面騷氣起來，下面就我個人在接觸Vue兩年的時間里，在實際工作中門戶網站在前端頁面交互應用和技巧，炒幾道小菜給大家分享一哈，我把它封裝成一個項目vue-portal-webUI（github源碼），不敢說是UI，但也是各種常見常遇到的情景吧，看懂代碼需要一些vue、axios、es6、scss基礎、數據基本上是mock，功能和場...

lingdududu 2019-08-26 12:12 評論0 收藏0
那些年，那些坑--swiper loop：true引發綁定dom的click事件無效及解決方案

摘要：第一版這是最常規的做法，把事件綁定在上。阻止點擊事件冒泡世界杯揭幕戰超新星球助攻俄羅斯沙特格里茲曼宣布留馬競顏值滿分世界杯首日美女球迷盤點盤點歷屆世界杯大比分屠殺希望借此可以幫助遇到此問題的小伙伴，祝大家的生活中再無。對于 swiper，只要做過輪播圖的童鞋應該都再熟悉不過了。這是一個很強大的圖片輪播插件，本身無任何第三方庫依賴，即插即用。api 文檔很清晰，所以很快能夠上手。但是，...

Barrior 2019-08-22 18:09 評論0 收藏0
vue引入新版 swiper,vue-awesome-swiper填坑

摘要：出錯前糾正后總結官網其實早放出說明來了，但自己一看全是英文，就沒想看下去。發現網上關于最新就兩三篇，而且沒說清楚。于是寫下這篇，希望對大家有幫助。關于新版 swiper,vue-awesome-swiper 問題為什么我的swiper,vue-awesome-swiper組件pagination小圓點不顯示問題? 為什么我的swiper不會自動播放？為什么我的swiper沒有c...

Miyang 2019-08-22 14:01 評論0 收藏0
用Vue搭建一個應用盒子（三）：音樂播放器

摘要：組件結構接著我們就該搭建這個播放器的組件了。總的原理是首先獲取音頻的持續時間，然后通過一個定時器，不斷更新顯示時間，播放完成時，計時器停止。這個頁面比較簡單，播放器標簽，綁定了事件，即播放完成后執行。這個播放器的開發歷時2個多月，并不是說它有多復雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因為拖延，二也是實習公司項目太緊。8月底結束實習前寫完了樣式，之后在家空閑...

appetizerio 2019-08-26 11:33 評論0 收藏0
基于 Vue 實現的移動端圖片輪播組件.

摘要：基于的移動端的圖片輪播組件之前一直在用功能很齊全但是唯一的問題就是體積比較大我只是想要一個簡單的圖片輪播但是卻要引入多大小的文件這樣是不對的特點支持自動播放無限輪播效果支持用戶手動滑動壓縮后大概使用在入口文件中引入暫時不支持單組 wc-swiper 基于 Vue 的移動端的圖片輪播組件. why 之前一直在用 vue-awesome-swiper, 功能很齊全, 但是唯一的問題就是體積...

hsluoyz 2019-08-20 18:52 評論0 收藏0