当前位置: 首页 > 编程笔记 >

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

长孙硕
2023-03-14
本文向大家介绍vue awesome swiper异步加载数据出现的bug问题,包括了vue awesome swiper异步加载数据出现的bug问题的使用技巧和注意事项,需要的朋友参考一下

本人第一次使用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组件中

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

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

下面贴上配置的代码

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问题,已解决下面贴图

将disableOnInteraction设置为false即可

总结

以上所述是小编给大家介绍的vue awesome swiper异步加载数据出现的bug问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 主要内容:echarts_test_data.json 数据:,实例,实例,实例ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行。 ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行。 json 数据: echarts_test_

  • 本文向大家介绍JavaScript异步加载问题总结,包括了JavaScript异步加载问题总结的使用技巧和注意事项,需要的朋友参考一下 同步加载的问题 默认的js是同步加载的,这里的“加载”可以理解成是解析、执行,而不是“下载”,在最新版本的浏览器中,浏览器对于代码请求的资源都是瀑布式的加载,而不是阻塞式的,但是js的执行总是阻塞的。这会引起什么问题呢?如果我的index页面要加载一些js,但是其

  • 参数: url - 返回JSON格式数据,数据格式与添加(更新)数据定义的data相同 asyncLoadCallback - 当加载完成时执行的回调函数 从一个数据源异步加载数据。用法: var url = "sampleData.json"; // 使用addDataAsync() API异步加载URL中的数据。 // 回调将在完成数据加载后执行。 controller.addDataAsyn

  • Highcharts 曲线图 以下实例演示了异步加载数据曲线图表。这边我们通过 jQuery.getJSON() 方法从异步加载 csv 文件: 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看个完整实例: 导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/d

  • 本文向大家介绍jQuery Ajax 加载数据时异步显示加载动画,包括了jQuery Ajax 加载数据时异步显示加载动画的使用技巧和注意事项,需要的朋友参考一下  ajax加载后台数据就不说的那么细了。 看下面代码首先前台上放置代码 在js脚本文件中首先把这个图片动画隐藏 代码如下 然后异步ajax提交请求代码如下 ..................... 注意: async: true, 当

  • 本文向大家介绍Android实现异步加载图片,包括了Android实现异步加载图片的使用技巧和注意事项,需要的朋友参考一下 麦洛开通博客以来,有一段时间没有更新博文了.主要是麦洛这段时间因项目开发实在太忙了.今天周六还在公司加班,苦逼程序猿都是这样生活的. 今天在做项目的时候,有一个实现异步加载图片的功能,虽然比较简单但还是记录一下吧.因为麦洛之前实现异步加载图片都是使用了AsynTask这个AP