欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年09月20日 09:58:33   作者:姚星如  
這篇文章主要介紹了詳解swiper在vue中的應用(以3.0為例),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一、使用方法

官網(wǎng)地址

參考此文章(點擊我)

二、常見情況

圖片需要動態(tài)獲取時

待數(shù)據(jù)加載成功且渲染完畢后,進行節(jié)點初始化。例:

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

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

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

方法:在初始化的時候,配置回調(diào)函數(shù)onTouchStart(開始滑動的X軸值)和 onTouchEnd(結(jié)束滑動的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) {
      //向前劃,加載前一組圖片  
    }
   }
  });
 });

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

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

數(shù)據(jù)方法配置

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設(shè)置為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
    // 如果自行設(shè)計了插件,那么插件的一些配置相關(guān)參數(shù),也應該出現(xiàn)在這個對象中,如下debugger
    // debugger: true,
    // swiper callbacks
    // swiper的各種回調(diào)函數(shù)也可以出現(xiàn)在這個對象中,和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)
  // 然后你就可以使用當前上下文內(nèi)的swiper對象去做你想做的事了
  // console.log('this is current swiper instance object', this.swiper)
  // this.swiper.slideTo(3, 1000, false)
 }
}

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue中如何實現(xiàn)拖拽調(diào)整順序功能

    vue中如何實現(xiàn)拖拽調(diào)整順序功能

    這篇文章主要介紹了vue中如何實現(xiàn)拖拽調(diào)整順序功能問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • javascript中Set、Map、WeakSet、WeakMap區(qū)別

    javascript中Set、Map、WeakSet、WeakMap區(qū)別

    這篇文章主要介紹了javascript中Set、Map、WeakSet、WeakMap區(qū)別,需要的朋友可以參考下
    2022-12-12
  • 利用Vue模擬實現(xiàn)element-ui的分頁器效果

    利用Vue模擬實現(xiàn)element-ui的分頁器效果

    這篇文章主要為大家詳細介紹了如何利用Vue模擬實現(xiàn)element-ui的分頁器效果,文中的示例代碼講解詳細,感興趣的小伙伴可以動手嘗試一下
    2022-11-11
  • Element表格表頭行高問題解決

    Element表格表頭行高問題解決

    在最近一個項目的后臺管理系統(tǒng)中,寫前端界面時用到了ElementUI,但是發(fā)現(xiàn)導入數(shù)據(jù)表格之后表頭的高度一直很高,那么如何解決,本文就來詳細的介紹一下
    2021-09-09
  • vue中的事件綁定舉例詳解

    vue中的事件綁定舉例詳解

    這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開發(fā)中非常常見,我們經(jīng)常需要在頁面中為某個DOM元素綁定事件,如點擊、鼠標移動、鍵盤敲擊等等,需要的朋友可以參考下
    2023-09-09
  • vuex命名空間的使用

    vuex命名空間的使用

    本文主要介紹了vuex命名空間的使用,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue實現(xiàn)登錄驗證碼

    vue實現(xiàn)登錄驗證碼

    這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄驗證碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue3+Elementplus實現(xiàn)面包屑功能

    Vue3+Elementplus實現(xiàn)面包屑功能

    這篇文章主要為大家詳細介紹了Vue3如何結(jié)合Elementplus實現(xiàn)面包屑功能,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以參考下
    2023-11-11
  • 如何處理?Vue3?中隱藏元素刷新閃爍問題

    如何處理?Vue3?中隱藏元素刷新閃爍問題

    本文主要探討了網(wǎng)頁刷新時,原本隱藏的元素會一閃而過的問題,以及嘗試過的解決方案并未奏效,通過實例代碼介紹了如何處理?Vue3?中隱藏元素刷新閃爍問題,感興趣的朋友跟隨小編一起看看吧
    2024-10-10
  • vue router點擊打開新的標簽頁的方法(最新推薦)

    vue router點擊打開新的標簽頁的方法(最新推薦)

    vue router點擊打開新的標簽頁的方法,只需要在router-link中加入target="_blank"即可在新的頁面打開標簽,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
    2023-10-10

最新評論