大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vueawesomeswiper异步加载数据出现的bug问题怎么办-创新互联

这篇文章主要介绍vue awesome swiper异步加载数据出现的bug问题怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

10年积累的网站设计制作、网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有伊州免费网站建设让你可以放心的选择与我们合作。

本人第一次使用vue awesome。

轮播第二次之后,首屏会自动跳过

网上找了很多资料,都不能解决这个问题。于是自己琢磨了很久终于灵光一闪。一个小技巧解决了这个问题。

使用方法应该很简单,去官网可以查看到方法。基本步骤如下

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组件中

vue awesome swiper异步加载数据出现的bug问题怎么办

图中标红就是解决办法,因为swiper需要在数据加载之后初始化,但是vue swiper暂时并没有提供这个方法(也有可能是我不知道这个方法)所以当数据加载之后

vue awesome swiper异步加载数据出现的bug问题怎么办

这样即可解决首屏的问题!

下面贴上配置的代码

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

再一个就是app中触屏滑动之后不能自动轮播的bug问题,已解决下面贴图

vue awesome swiper异步加载数据出现的bug问题怎么办

将disableOnInteraction设置为false即可

以上是“vue awesome swiper异步加载数据出现的bug问题怎么办”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:vueawesomeswiper异步加载数据出现的bug问题怎么办-创新互联
URL网址:http://dzwzjz.com/article/dgopdc.html
在线咨询
服务热线
服务热线:028-86922220
TOP