项目中使用了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. mybatis:自定义映射关系resultMap

    创建表t_emp 定义实体类 package org.example.entity; public class Emp { private Integer empId; private String ...

  2. 时间序列分析 2.X 单位根检验

    单位根检验 (基于模型检验序列是否平稳) 趋势平稳序列 \(X_{t}=\beta_{0}+\beta_{1} t+Y_{t}\) \(Y_t\) 为平稳序列, 则称 \(X_t\) 为趋势平稳序列 ...

  3. 发现一个API接口自动化测试平台

    gitee地址:https://gitee.com/season-fan/autometer-api 记录一下: 1.API测试平台的5个需求: ①支持不同的项目,不同的角色,技术人员多人协作 ②支持 ...

  4. USB从机主动断开连接

    目录 在一些情况下,需要USB口的引脚复用成其他功能,比如说PB10.PB11要复用成定时器输出引脚:或者需要USB从机主动断开,类似某些杀毒软件带的"安全弹出",不过杀毒软件操作 ...

  5. 【windows】bat脚本、批处理文件

    ::当前盘符 @echo current pan : %~d0 ::当前路径 @echo current path : %cd%\ ::当前bat文件路径 @echo the bat's path : ...

  6. zzul1058_Java

    import java.util.Scanner;public class zzul1058 { public static void main(String[] args) { Scanner in ...

  7. 用 yaml 写测试用例

    采用 excel 的方式写测试用例,格式比较死板,比较容易出错,采用 yaml / yml 格式来写用例. 首先安装 pyyaml:pip install pyyaml 建立一个 login.yaml ...

  8. C#校验GPS数据

    从#或$后开始,到*之前是GPS数据,*之后是校验位. public bool Verified(string gps) { gps = gps.TrimStart('#', '$'); var s ...

  9. ARM的发展史以及架构解析

    本文从ARM的发展历史着手,以S3C2440为例与51单片机进行对比分析,详细解析了ARM架构. 先来谈一下ARM的发展史:1978年12月5日,物理学家Hermann Hauser和工程师Chris ...

  10. vmhost永久免费主机搭建wordpress

    vmhost主机试用+worpress搭建 点击vmhost进入vmhost官网,vmhost提供了永久免费的主机,还附带一个三级域名,并且支自定义子域名,免费托管5G的网页空间,网页支持php语言, ...