项目中使用了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. yile接口

    后台接口: ---------------------------更改订单状态接口(需要主站长账号权限,主站要有接口权限)更改订单状态(可批量更新),如需退款/退单请用订单退款退单接口,如需更新订单数 ...

  2. 关于MFC程序关闭之后仍有线程存留

    最近弄了一个项目,关闭之后在任务管理器中依然存留,刚开始以为是因为子线程没能退出,就用ExitThread来终止,终止之后发现好像并不是子线程的原因 查了好久没能找到原因 最后只能通杀 HANDLE ...

  3. Spring Security 5 ----默认的filter都有什么用?

    我去找参考资料时,大部分只是来自于官网,但是很少分析为什么这么干,所以网络代码只停留于demo,生产级的应用却需要另外思考,不思考会有坑哦.大部分资料,合理不合理先不说,反正通了就行.本文试图去找寻, ...

  4. VUE学习-监听事件

    监听事件 事件处理方法可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. <div id="app"> <button v ...

  5. windows运行xcopy计划任务 结果是0x4解决方案

    近几天发现一直好好的数据备份计划任务一直返回0x4失败,直接执行bat又是正常的. bat命令中使用的是xcopy,到处找方案没解决. 今天意外在使用另一个命令时,发现提示:网络连接数据超过最大值. ...

  6. 报错信息;Cannot execute request on any known server 解决;sprigcloud;跑本地但是服务一直在eureka

    配置文件加上: eureka.client.register-with-eureka=falseeureka.client.fetch-registry=false

  7. Vue项目使用/deep/报错:SassError: expected selector解决方案--亲测有效

    项目npm run dev报错如下: 解决方法: 尝试用 ::v-deep 替换 /deep/ ,成功解决了问题. 效果如下图所示(完美解决~) 某些预处理器(例如Sass)可能无法>>& ...

  8. Mac系统中安装Nginx

    ​ 一.前言 本文介绍一下,如何在Mac系统中安装Nginx,把详细过程记录下来,方便以后查看,也方便大家学习. 二.正文 1.安装 Homebrew homebrew是什么?它是Mac中的一款软件包 ...

  9. 前端如何给bearer token传值

    Bearer token是一种常见的身份验证机制,通常用于Web API和其他Web服务.在前端中,Bearer token通常是通过HTTP头(HTTP header)发送的,具体来说是通过&quo ...

  10. 02 python初识

    Python初识 一.入门基础 1. 第一个Python程序 python 代码都是编写在以 .py 结尾的文件中.我们随便新建一个文件,并将文件后缀名改为 .py,在里面编写我们的第一个 pytho ...