vue awesome swiper异步加载数据出现的bug问题
作者：Mythsool 发布时间：2024-05-03 15:10:58
标签：vue,awesome,swiper
本人第一次使用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问题网站的支持！
来源：https://blog.csdn.net/Miss739999536/article/details/80323831
0
投稿猜你喜欢
- tuple函数功能和list功能很相似，以序列为参数并把它转换为元组>>> tuple([1,2,3])(1, 2, 3)
- window.showModalDialog() 使用方法：var returnValue = window.showModalDialog
- python代码 # -*- coding: utf-8 -*- import Image,ImageDraw,Imag
函数 0. 显示当前时间命令：select now()。作用: 显示当前时间。应用场景: 创建时间，修改时间等默认值。例子：mys- 导语说到童年爱玩的电脑游戏，你会想到什么？最国民的莫过于金山打字通，接着是扫雷、红心大战，而红极一时的单机游戏当属《大富翁》。嘻嘻 打字游戏
- 如下所示：matplotlib subplots 设置总图的标题 ：fig.suptitle(dname,fontsize=16,x=0.5
- 0x 00 返回值简介回顾下，上一节简单介绍了函数及其各种参数，其中也有简单介绍 print 和 return 的区别，print 仅仅是打
- 需求：写一个登录的程序，1、最多登陆失败3次2、登录成功，提示欢迎xx登录，今天的日期是xxx，程序结束3、要检验输入是否为空,账号和密码不
- choice()方法从一个列表，元组或字符串返回一个随机项。语法以下是choice()方法的语法：choice( seq )注意
- 话不多说，直接上代码import copyimport cv2import numpy as npWIN_NAME = 'draw_
- 随着当今世界的发展，计算机视觉技术的应用越来越广泛。伴随着硬件设备的不断升级，构造复杂的计算机视觉应用变得越来越容易了。OpenCV像是一个
- 使用 datetime 模块中的 timedelta() 方法将天数添加到日期中，例如 result_1 = date_1 + timede
- 前言最近在看测试相关的内容，发现自动化测试很好玩，就决定做一个自动回复QQ消息的脚本(我很菜)1、需要安装的模块这个自动化脚本需要用到3个模
- 目录Blazor Server 应用程序中进行 HTTP 请求一、第三方 Web API 概览二、从 Blazor Sever 应用程序开始
- Idea 2020 发布之后，官方终于支持了中文语言包但是，我下载后在插件市场无法找到官方的汉化包那要怎么解决这个问题呢？首先，查看你当前I
- 首先祝大家国庆节日快乐，这个假期因为我老婆要考注会，我也跟着天天去图书馆学了几天，学习的感觉还是非常不错的，这是一篇总结。这篇博客准备讲解一
- 前言本文参考了以下代码Windows系统环境下Python脚本实现全局“划词复制”功能from py
- python的图形用户界面我是大帅哥啊 python的图形用户界面msgbox的使用ccbox的使用buttonbox的使用buttonbo
- 因为是看书自学的python,开始后不久就遇到了这个引入的模块函数，且一直在IDLE上编辑了后运行，试图从结果发现它的用途，然而结果一直都是
- 1 存储过程1.1 什么是存储过程存储过程是一组为了完成某项特定功能的sql语句集，其实质上就是一段存储在数据库中的代码，他可以由声明式的s
