中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解swiper在vue中的應用(以3.0為例)

發布時間:2020-08-30 15:44:09 來源:腳本之家 閱讀:867 作者:姚星如 欄目:web開發

一、使用方法

官網地址

參考此文章(點擊我)

二、常見情況

圖片需要動態獲取時

待數據加載成功且渲染完畢后,進行節點初始化。例:

axios.post(‘接口地址', 參數).then(response => {  
  this.pages = response.data; //pages 渲染數據的數組
  this.$nextTick(() => { //渲染結束
    // mySwiper 里面的屬性按需配置,詳情見官網
    let mySwiper = new Swiper(".swiper-container", { 
      initialSlide :0,//默認播放(值為圖片下標)
      loop: false,//不循環
      speed: 600, //切換速度
      paginationClickable: true, //點擊小點可以切換
    });
   });
});

當有 3 組圖片需要依次播放時(多組以此類推)

情景:第 2 組圖片滑動最后一張時,需要加載第 3 組圖片;第 2 組圖片滑動第一張時,需要加載第 1 組圖片。

方法:在初始化的時候,配置回調函數onTouchStart(開始滑動的X軸值)和 onTouchEnd(結束滑動的X軸值)。用差值來判斷是往前滑還是往后劃。

 this.$nextTick(() => {
  let mySwiper = new Swiper(".swiper-container", {
   observer: true, //修改swiper自己或子元素時,自動初始化swiper
   observeParents: true, //修改swiper的父元素時,自動初始化swiper     
   onTouchStart: function(swiper) {
    this.positionStart = swiper.getWrapperTranslate();
   },
   onTouchEnd: function(swiper) {
    this.positionEnd = swiper.getWrapperTranslate();
    if (this.positionStart > this.positionEnd && this.pages.length - 1 == this.mySwiper.activeIndex) { 
      //向后滑,加載后一組圖片       
    } else if (mySwiper.activeIndex == 0 && this.positionStart < this.positionEnd) {
      //向前劃,加載前一組圖片  
    }
   }
  });
 });

這時,圖片已經加載了另外一組圖片,但是各組圖片之間沒有連貫起來,這就需要用到 slideTo方法去跳轉(若加載第 3 組,則跳轉到下標第 0 個;若加載第 1 組,則跳轉到下標第 圖片個數-1 個)。

mySwiper.slideTo('要跳轉的圖片下標', 10, false) // 10表示跳轉速度;false 代表是否觸發回到函數

數據方法配置

export default {
 name: '',
 data() {
  return {
   swiperOption: {
    // NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
    // notNextTick是一個組件自有屬性,如果notNextTick設置為true,組件則不會通過NextTick來實例化swiper,也就意味著你可以在第一時間獲取到swiper對象,假如你需要剛加載遍使用獲取swiper對象來做什么事,那么這個屬性一定要是true
    notNextTick: true,
    // swiper configs 所有的配置同swiper官方api配置
    autoplay: 3000,
    // direction : 'vertical',
    effect:"coverflow",
    grabCursor : true,
    setWrapperSize :true,
    // autoHeight: true,
    // paginationType:"bullets",
    pagination : '.swiper-pagination',
    paginationClickable :true,
    prevButton:'.swiper-button-prev',
    nextButton:'.swiper-button-next',
    // scrollbar:'.swiper-scrollbar',
    mousewheelControl : true,
    observeParents:true,
    // if you need use plugins in the swiper, you can config in here like this
    // 如果自行設計了插件,那么插件的一些配置相關參數,也應該出現在這個對象中,如下debugger
    // debugger: true,
    // swiper callbacks
    // swiper的各種回調函數也可以出現在這個對象中,和swiper官方一樣
    // onTransitionStart(swiper){
    //  console.log(swiper)
    // },
    // more Swiper configs and callbacks...
    // ...
   }
  }
 },components: {
 swiper,
 swiperSlide
},
 // you can find current swiper instance object like this, while the notNextTick property value must be true
 // 如果你需要得到當前的swiper對象來做一些事情,你可以像下面這樣定義一個方法屬性來獲取當前的swiper對象,同時notNextTick必須為true
 computed: {
  swiper() {
   return this.$refs.mySwiper.swiper
  }
 },
 mounted() {
  // you can use current swiper instance object to do something(swiper methods)
  // 然后你就可以使用當前上下文內的swiper對象去做你想做的事了
  // console.log('this is current swiper instance object', this.swiper)
  // this.swiper.slideTo(3, 1000, false)
 }
}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

高邮市| 保康县| 阆中市| 宜川县| 定西市| 慈利县| 吐鲁番市| 竹北市| 西吉县| 阆中市| 宁德市| 鹤岗市| 乌鲁木齐市| 闽清县| 任丘市| 江北区| 乳源| 龙口市| 什邡市| 张家港市| 阿拉尔市| 满洲里市| 盐源县| 尼玛县| 霍城县| 阿克| 呼伦贝尔市| 保康县| 十堰市| 札达县| 中江县| 华宁县| 佛山市| 巨野县| 锡林郭勒盟| 庐江县| 丰镇市| 靖州| 方城县| 安图县| 新和县|