成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

binta / 3114人閱讀

摘要：移動(dòng)端輪播圖插件，在使用圖形界面插件中的組件無(wú)法實(shí)現(xiàn)觸摸滑動(dòng)后，轉(zhuǎn)而使用插件安裝我這里安裝的是下面的這個(gè)版本使用全局導(dǎo)入樣式的話，我這里有用到分頁(yè)器，就在全局中引入了樣式組件引入在中使用常見(jiàn)的小圓點(diǎn)

移動(dòng)端輪播圖插件，在使用iview圖形界面插件中的carousel組件無(wú)法實(shí)現(xiàn)觸摸滑動(dòng)后，轉(zhuǎn)而使用vue-awesome-swiper插件
1.npm安裝 
npm i vue-awesome-swiper -S

我這里安裝的是下面的這個(gè)版本

2.使用

全局導(dǎo)入：

import Vue from "vue"
import vueSwiper from "vue-awesome-swiper"
/* 樣式的話，我這里有用到分頁(yè)器，就在全局中引入了樣式 */
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: {
        //是一個(gè)組件自有屬性，如果notNextTick設(shè)置為true，組件則不會(huì)通過(guò)NextTick來(lái)實(shí)例化swiper，也就意味著你可以在第一時(shí)間獲取到swiper對(duì)象，假如你需要?jiǎng)偧虞d遍使用獲取swiper對(duì)象來(lái)做什么事，那么這個(gè)屬性一定要是true
        notNextTick: true,
        //循環(huán)
        loop: true,
        //設(shè)定初始化時(shí)slide的索引
        initialSlide: 0,
        //自動(dòng)播放
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          /* 觸摸滑動(dòng)后是否繼續(xù)輪播 */
          disableOnInteraction: false
        },
        //滑動(dòng)速度
        speed: 800,
        //滑動(dòng)方向
        direction: "horizontal",
        //小手掌抓取滑動(dòng)
        grabCursor: true,
        on: {
          //滑動(dòng)之后回調(diào)函數(shù)
          slideChangeTransitionStart: function() {
            /* realIndex為滾動(dòng)到當(dāng)前的slide索引值 */
            that.imgIndex= this.realIndex - 1;
          },
        },
        //分頁(yè)器設(shè)置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      }
   };
},
3.遇見(jiàn)的問(wèn)題

這個(gè)插件，在圖片只有一張時(shí)，仍然會(huì)自動(dòng)滾動(dòng)

這里很需要注意的一點(diǎn)就是，如果你直接設(shè)置autoplay為true的話，在你觸摸滑動(dòng)圖片后，他就不會(huì)再自動(dòng)滾動(dòng)了
/* 這里我是在使用接口請(qǐng)求后，對(duì)返回的數(shù)據(jù)進(jìn)行判斷 */
created() {
  this.$Request({
    url: "",
    method: "get",
    success: res => {
      this.swiperOption.autoplay = res.result.data.length != 1 ? {
        delay: 1500,
        stopOnLastSlide: false,
        disableOnInteraction: false
        } : false;
     }
  })
}

在on里面，監(jiān)聽(tīng)slideChangeTransitionStart方法時(shí)，在開(kāi)始的時(shí)候，我用的是activeIndex來(lái)設(shè)置對(duì)應(yīng)的索引值，這個(gè)的話，滑向下一張沒(méi)有發(fā)現(xiàn)問(wèn)題，后面，自己試著滑向上一張圖片，就發(fā)現(xiàn)出現(xiàn)問(wèn)題，這個(gè)值不對(duì)應(yīng)了,使用realIndex

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

在swiper這個(gè)容器中，會(huì)出現(xiàn)滾動(dòng)到最后一張圖片后就不自動(dòng)滾動(dòng)了，以及出現(xiàn)底邊的小圓點(diǎn)寫(xiě)了后不顯示的問(wèn)題

原因是因?yàn)閠his.commodity剛開(kāi)始數(shù)據(jù)為[],后來(lái)賦值才有值，所以要先判斷this.commodity是否為空,這里就在swiper這個(gè)容器中進(jìn)行判斷，若數(shù)據(jù)長(zhǎng)度為0，就不顯示這個(gè)容器
正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

webpack打包（有面試題）

純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）

畫(huà)三角形

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97810.html

相關(guān)文章

  • 當(dāng)大多數(shù)人對(duì)Vue理解到爐火純青的時(shí)候，是不是該思考一下怎么讓vue頁(yè)面騷氣起來(lái)

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

    lingdududu 評(píng)論0 收藏0

  • 那些年，那些坑--swiper loop：true引發(fā)綁定dom的click事件無(wú)效及解決方案

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

    Barrior 評(píng)論0 收藏0

  • vue引入新版 swiper,vue-awesome-swiper填坑

    摘要：出錯(cuò)前糾正后總結(jié)官網(wǎng)其實(shí)早放出說(shuō)明來(lái)了，但自己一看全是英文，就沒(méi)想看下去。發(fā)現(xiàn)網(wǎng)上關(guān)于最新就兩三篇，而且沒(méi)說(shuō)清楚。于是寫(xiě)下這篇，希望對(duì)大家有幫助。 關(guān)于新版 swiper,vue-awesome-swiper 問(wèn)題 為什么我的swiper,vue-awesome-swiper組件pagination小圓點(diǎn)不顯示問(wèn)題? 為什么我的swiper不會(huì)自動(dòng)播放？ 為什么我的swiper沒(méi)有c...

    Miyang 評(píng)論0 收藏0

  • 用Vue搭建一個(gè)應(yīng)用盒子（三）：音樂(lè)播放器

    摘要：組件結(jié)構(gòu)接著我們就該搭建這個(gè)播放器的組件了?？偟脑硎鞘紫全@取音頻的持續(xù)時(shí)間，然后通過(guò)一個(gè)定時(shí)器，不斷更新顯示時(shí)間，播放完成時(shí)，計(jì)時(shí)器停止。這個(gè)頁(yè)面比較簡(jiǎn)單，播放器標(biāo)簽，綁定了事件，即播放完成后執(zhí)行。 這個(gè)播放器的開(kāi)發(fā)歷時(shí)2個(gè)多月，并不是說(shuō)它有多復(fù)雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因?yàn)橥涎?，二也是?shí)習(xí)公司項(xiàng)目太緊。8月底結(jié)束實(shí)習(xí)前寫(xiě)完了樣式，之后在家空閑...

    appetizerio 評(píng)論0 收藏0

  • 基于 Vue 實(shí)現(xiàn)的 移動(dòng)端圖片輪播組件.

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

    hsluoyz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<