项目中使用了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. Git安装,配置、基本使用

    p.p1 { margin: 0; font: 12px ".PingFang SC" } p.p2 { margin: 0; text-align: justify; font: ...

  2. python容易被忽略的问题

    1.int()强制转换浮点数 在int()的强制转换浮点数时候,不管是正数还是负数,只取整数部分. print(int(6.235)) # 6 print(int(-6.235)) # -6 注意:这 ...

  3. dns服务之bind配置内网解析部分子域名,其它子域名转发

    bind配置内网解析部分子域名,其它子域名转发.以下以m.xxx.com和admin.xxx.com由内网dns解析,其它*.xxx.com转发给外网dns解析为例配置.文件/etc/named.co ...

  4. git---全局设置用户名、密码、邮箱

    # git config命令的–global参数,用了这个参数,表示你这台机器上所有的Git仓库都会使用这个配置,当然也可以对某个仓库指定不同的用户名和Email地址. # 1.查看git配置信息 $ ...

  5. Mac卡顿 CPU占100%的原因Photolibraryd

    找到了造成电脑卡顿的元凶,第一步要做的就是杀进程,选中这两个进程,点击上面的结束按钮,世界立马恢复了宁静,高兴的继续码代码,可是好景不长,大约一个小时以后,又特么卡了,"任务管理器" ...

  6. MYSQL --存储引擎的对比

    主要介绍三种 InnoDB .MyISAM .Memory 一.InnoDB 介绍: InnoDB是一种兼顾高可靠性和高性能的通用存储引擎,在MySQL5.5之后默认的存储引擎 特点: DML操作遵循 ...

  7. JVM(一) --- 什么是JVM

    写在文章前:本系列博客是学习黑马程序员JVM完整教程所做笔记.若有错误希望大佬们评论区修正. 一.什么是JVM      Java Virtual Machine - java程序运行时所需环境(ja ...

  8. 「postOI」Lost Array

    题意 有一个序列 \(A=\{a_1, a_2, ..., a_n\}\),按如下方式构造一个 \((n + 1) \times (n + 1)\) 的矩阵 \(B\): \(B_{i0}=0\)(\ ...

  9. Metasploit渗透测试框架二

    Metasploit基本使用方法 Metasploit基本命令 Metasploit程序需要使用Postgresql数据库. Postgresql是一种特性齐全的自由软件的对象-关系型数据库管理系统( ...

  10. Windows流媒体怎么关闭。

    点击白色框,搜索服务. 步骤阅读 步骤阅读 2 选本地服务旁打开,然后下拉服务. 步骤阅读 步骤阅读 3 选择media,然后右键它属性. 步骤阅读 步骤阅读 4 然后点击停止,点击手动. 步骤阅读 ...