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

vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題

 更新時(shí)間：2018年07月03日 09:10:08   作者：Mythsool  
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

本人第一次使用vue awesome。

踩到的坑確實(shí)不少。官網(wǎng)上面的用法寫的很簡單，按照上面做法基本會遇到如下這個(gè)問題

輪播第二次之后，首屏?xí)詣犹^

網(wǎng)上找了很多資料，都不能解決這個(gè)問題。于是自己琢磨了很久終于靈光一閃。一個(gè)小技巧解決了這個(gè)問題。

使用方法應(yīng)該很簡單，去官網(wǎng)可以查看到方法?；静襟E如下

npm install vue-awesome-swiper --save-dev

在main.js中

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

在vue組件中

圖中標(biāo)紅就是解決辦法，因?yàn)閟wiper需要在數(shù)據(jù)加載之后初始化，但是vue swiper暫時(shí)并沒有提供這個(gè)方法（也有可能是我不知道這個(gè)方法）所以當(dāng)數(shù)據(jù)加載之后

這樣即可解決首屏的問題！

下面貼上配置的代碼

swiperOption:{
    loop:true,
    notNextTick: true,
    mousewheelControl: true,
    autoplayDisableOnInteraction:false,
    observer:true,//修改swiper自己或子元素時(shí)，自動初始化swiper
    observeParents:true,//修改swiper的父元素時(shí)，自動初始化swiper
    paginationClickable: true,
    autoplay : {
     delay:3000
    },
    observer:true,
    speed:300,
    pagination: {
     el: '.swiper-pagination',
     clickable: true
    }

再一個(gè)就是app中觸屏滑動之后不能自動輪播的bug問題，已解決下面貼圖

將disableOnInteraction設(shè)置為false即可

總結(jié)

以上所述是小編給大家介紹的vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • Vue權(quán)限指令控制權(quán)限詳解

    Vue權(quán)限指令控制權(quán)限詳解

    因?yàn)轫?xiàng)目中需要根據(jù)后端返回的權(quán)限進(jìn)行功能的顯示隱藏，所以就加了個(gè)權(quán)限指令。不用寫if else進(jìn)行判斷，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-09-09
  • vue2.0實(shí)現(xiàn)檢測無用的代碼并刪除

    vue2.0實(shí)現(xiàn)檢測無用的代碼并刪除

    這篇文章主要介紹了vue2.0實(shí)現(xiàn)檢測無用的代碼并刪除方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案

    Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案

    element ui官方封裝好的el-table組件,好用是挺好用的,但不可避免的是默認(rèn)的樣式,下面這篇文章主要給大家介紹了關(guān)于Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案,需要的朋友可以參考下
    2023-02-02
  • Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)

    Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)

    Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來,我們就直接一個(gè)個(gè)來看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來看看吧
    2024-07-07
  • vue中使用jwt-decode解析token的方法

    vue中使用jwt-decode解析token的方法

    這篇文章主要介紹了vue中使用jwt-decode解析token,文末給大家補(bǔ)充介紹了vue通過jwt-decode解析token獲取需要的數(shù)據(jù)，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2022-06-06
  • Vue實(shí)現(xiàn)日歷小插件

    Vue實(shí)現(xiàn)日歷小插件

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)日歷小插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-06-06
  • vue前端img訪問鑒權(quán)后端進(jìn)行攔截的代碼示例

    vue前端img訪問鑒權(quán)后端進(jìn)行攔截的代碼示例

    路由攔截是一種在用戶訪問特定頁面之前對其進(jìn)行攔截和處理的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于vue前端img訪問鑒權(quán)后端進(jìn)行攔截的相關(guān)資料,需要的朋友可以參考下
    2024-03-03
  • 使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例

    使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例

    這篇文章主要介紹了使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式

    element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式

    這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • 詳解Vue進(jìn)階構(gòu)造屬性

    詳解Vue進(jìn)階構(gòu)造屬性

    這篇文章主要介紹了Vue進(jìn)階構(gòu)造屬性，從4個(gè)方面來進(jìn)行講解：Directive、Mixin 混入、Extends 繼承、provide 和 inject，感興趣的小伙伴們，趕快來看一下
    2021-05-05

最新評論