成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

binta / 3176人閱讀

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

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

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


2.使用

全局導(dǎo)入：


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設(shè)置為true，組件則不會通過NextTick來實例化swiper，也就意味著你可以在第一時間獲取到swiper對象，假如你需要剛加載遍使用獲取swiper對象來做什么事，那么這個屬性一定要是true
        notNextTick: true,
        //循環(huán)
        loop: true,
        //設(shè)定初始化時slide的索引
        initialSlide: 0,
        //自動播放
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          /* 觸摸滑動后是否繼續(xù)輪播 */
          disableOnInteraction: false
        },
        //滑動速度
        speed: 800,
        //滑動方向
        direction: "horizontal",
        //小手掌抓取滑動
        grabCursor: true,
        on: {
          //滑動之后回調(diào)函數(shù)
          slideChangeTransitionStart: function() {
            /* realIndex為滾動到當(dāng)前的slide索引值 */
            that.imgIndex= this.realIndex - 1;
          },
        },
        //分頁器設(shè)置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      }
   };
},

3.遇見的問題

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


這里很需要注意的一點就是，如果你直接設(shè)置autoplay為true的話，在你觸摸滑動圖片后，他就不會再自動滾動了


/* 這里我是在使用接口請求后，對返回的數(shù)據(jù)進行判斷 */
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)聽slideChangeTransitionStart方法時，在開始的時候，我用的是activeIndex來設(shè)置對應(yīng)的索引值，這個的話，滑向下一張沒有發(fā)現(xiàn)問題，后面，自己試著滑向上一張圖片，就發(fā)現(xiàn)出現(xiàn)問題，這個值不對應(yīng)了,使用realIndex


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


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


原因是因為this.commodity剛開始數(shù)據(jù)為[],后來賦值才有值，所以要先判斷this.commodity是否為空,這里就在swiper這個容器中進行判斷，若數(shù)據(jù)長度為0，就不顯示這個容器




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




往期好文推薦：



webpack打包（有面試題）


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


畫三角形



           
               
                                           
                       
                 

            
                     
             
               

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

                 
                   
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97810.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    當(dāng)大多數(shù)人對Vue理解到爐火純青的時候，是不是該思考一下怎么讓vue頁面騷氣起來
    
                                                     
    寫在前面
當(dāng)大多數(shù)人Vue理解的爐火純青的時候，你應(yīng)該思考怎么讓vue頁面騷氣起來，下面就我個人在接觸Vue兩年的時間里，在實際工作中門戶網(wǎng)站在前端頁面交互應(yīng)用和技巧，炒幾道小菜給大家分享一哈，我把它封裝成一個項目vue-portal-webUI（github源碼），不敢說是UI，但也是各種常見常遇到的情景吧，看懂代碼需要一些vue、axios、es6、scss基礎(chǔ)、數(shù)據(jù)基本上是mock，功能和場...
    
                                                   
                          
    
                                
    
                                    lingdududu
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    那些年，那些坑--swiper loop：true引發(fā)綁定dom的click事件無效及解決方案
    
                                                     
    摘要：第一版這是最常規(guī)的做法，把事件綁定在上。阻止點擊事件冒泡世界杯揭幕戰(zhàn)超新星球助攻俄羅斯沙特格里茲曼宣布留馬競顏值滿分世界杯首日美女球迷盤點盤點歷屆世界杯大比分屠殺希望借此可以幫助遇到此問題的小伙伴，祝大家的生活中再無。

對于 swiper，只要做過輪播圖的童鞋應(yīng)該都再熟悉不過了。這是一個很強大的圖片輪播插件，本身無任何第三方庫依賴，即插即用。api 文檔很清晰，所以很快能夠上手。但是，...
    
                                                   
                          
    
                                
    
                                    Barrior
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue引入新版 swiper,vue-awesome-swiper填坑
    
                                                     
    摘要：出錯前糾正后總結(jié)官網(wǎng)其實早放出說明來了，但自己一看全是英文，就沒想看下去。發(fā)現(xiàn)網(wǎng)上關(guān)于最新就兩三篇，而且沒說清楚。于是寫下這篇，希望對大家有幫助。

關(guān)于新版 swiper,vue-awesome-swiper
問題

為什么我的swiper,vue-awesome-swiper組件pagination小圓點不顯示問題?
為什么我的swiper不會自動播放？
為什么我的swiper沒有c...
    
                                                   
                          
    
                                
    
                                    Miyang
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    用Vue搭建一個應(yīng)用盒子（三）：音樂播放器
    
                                                     
    摘要：組件結(jié)構(gòu)接著我們就該搭建這個播放器的組件了?？偟脑硎鞘紫全@取音頻的持續(xù)時間，然后通過一個定時器，不斷更新顯示時間，播放完成時，計時器停止。這個頁面比較簡單，播放器標(biāo)簽，綁定了事件，即播放完成后執(zhí)行。

這個播放器的開發(fā)歷時2個多月，并不是說它有多復(fù)雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因為拖延，二也是實習(xí)公司項目太緊。8月底結(jié)束實習(xí)前寫完了樣式，之后在家空閑...
    
                                                   
                          
    
                                
    
                                    appetizerio
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    基于 Vue 實現(xiàn)的 移動端圖片輪播組件.
    
                                                     
    摘要：基于的移動端的圖片輪播組件之前一直在用功能很齊全但是唯一的問題就是體積比較大我只是想要一個簡單的圖片輪播但是卻要引入多大小的文件這樣是不對的特點支持自動播放無限輪播效果支持用戶手動滑動壓縮后大概使用在入口文件中引入暫時不支持單組

wc-swiper
基于 Vue 的移動端的圖片輪播組件.
why
之前一直在用 vue-awesome-swiper, 功能很齊全, 但是唯一的問題就是體積...
    
                                                   
                          
    
                                
    
                                    hsluoyz
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<