项目中使用了vue-awesome-swiper,发现autoplay不能用。网上找了半天,说是版本问题。最后在main.js中添加以下代码解决。

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.min.css';
Vue.use(VueAwesomeSwiper);
import Swiper2, {Navigation, Pagination, EffectFade, Autoplay } from 'swiper';
Swiper2.use([Navigation, Pagination, EffectFade, Autoplay]);
 
另外,swiper中的循环项目过多,导致页面卡顿,解决办法是把swiper-slide改成swiper-item。
swiperOption中的slidesPerView需要设置,否则会导致swiper计算不准,出现swiper滚动到最后出现空白的现象。
 
在这里记录一个不是swiper的问题,a标签跳转打开链接的时候会在http标头中带上引荐来源信息到目标网站,目标网站如果判断有引荐来源可能会返回404页面,可以通过给a标签添加rel="noreferrer"属性解决。
 

vue-awesome-swiper使用中的一些问题的更多相关文章

  1. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  2. Vue与swiper想结合封装全屏轮播插件

    项目需求介绍: 1.页面图文混排, 2.点击图片后全屏展示图片,并在底部显示文字,如果没有则不显示 3.关闭全屏后依然停留在上次浏览的位置 4.浏览图片时,不管点击的哪张图片,全屏展示的时候也要显示这 ...

  3. vue 使用swiper的一些问题(页面渲染问题)

    //Swiper上下滚动初始化 swiper_init(){ this.$nextTick(function(){ var mySwiper = new Swiper ('.swiper-contai ...

  4. vue awaresome swiper的使用

    main.jsimport VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'Vue.use(V ...

  5. 小程序和Vue利用swiper实现icons分页显示--动态计算

    这里发现小程序实现步骤,Vue与之类似 先上效果图: <view class="icons"> <swiper indicator-dots="true ...

  6. vue使用swiper模块滑动时报错:[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example becaus

    报错: vue报这个错 [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for ex ...

  7. 轮播模仿臭美APP,vue,swiper

    介绍:轮播使用了swiper,重要用于移动端滑动,详情可查看官网 1.首先用npm安装        npm install swiper 2.main.js 中引入CSS     import 's ...

  8. vue封装swiper

    参考:https://github.com/surmon-china/vue-awesome-swiper npm install vue-awesome-swiper --save 全局引入 imp ...

  9. vue添加swiper的正确方式亲测---切图网

    在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-s ...

  10. Vue整合swiper报错Could not compile template .....swiper\dist\css\swiper.css解决办法

    问题描述 今天做一个前端项目,安装幻灯片插件vue-awesome-swiper后 运行npm run dev 后报错如下: `ERROR Could not compile template E:\ ...

随机推荐

  1. hashMap的底层数据结构

    本节用于记录Java HashMap底层数据结构.方法实现原理等,基于JDK 1.8. # 底层数据结构 Java hashMap 是采用哈希表结构的(数组+链表 /jdk8后加入红黑树)实现,结合了 ...

  2. RTFormer: Efficient Design for Real-Time Semantic Segmentation with Transformer概述

    0.前言 相关资料: arxiv github 论文解读 论文基本信息: 发表时间:NeurlPS2022(2022.10.13) 1.摘要 最近,基于Transformer的网络在语义分割方面取得了 ...

  3. datagridview 标题设置背景图片

    private void dgvCaozuoList_CellPainting(object sender, DataGridViewCellPaintingEventArgs e) { if (e. ...

  4. CentOS 镜像官网下载链接

    CentOS 镜像官网下载链接: https://www.centos.org/download/mirrors/ http://mirrors.aliyun.com/centos/ https:// ...

  5. @Target:注解的作用目标

    @Target:注解的作用目标 @Target(ElementType.TYPE)--接口.类.枚举.注解 @Target(ElementType.FIELD)--字段.枚举的常量 @Target(E ...

  6. Mac 用Parallels Desktop安装Windows 10

    下面就一步一步来学习如何用Parallels Desktop安装Windows 10系统: 1.首先下载并安装  Parallels Desktop 14版,下载 Windows 10 系统镜像 2. ...

  7. java ArrayList 原理

    概述 底层通过数组实现,所以 查询/更新效率很高,删除/增加跟位置相关,除未实现同步外和 Vector 大致相同 自动扩容,每次扩容大概 1.5 倍,扩容代价比较高尽量避免 实现了 RandomAcc ...

  8. 搭PHP本地环境-windows

    项目中要用php开发,但是本地没环境调试不方便,所以搭一下本期环境. 1.下载php phpstudy工具官网:https://www.xp.cn/.phpstudy和WAMP工具的不同之处在于,ph ...

  9. Linux中启动Docker容器报错:Error response from daemon: driver failed programming external connectivity

    在启动Docker的容器时,会出现报错:Error response from daemon: driver failed programming external connectivity on e ...

  10. [Docker-2]排查基于docker部署mysql主从过程中遇到“Slave_IO_Running: Connecting”这个疑难杂症

    关于"Slave_IO_Running: Connecting"的排查方法,已经有很多博客写得清清楚楚了(很多都是复制粘贴..真浪费时间),那么如果已有的常规排查方法都不能解决你的 ...