项目中使用了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. [UnityShader]unity中2D Sprite显示阴影和接受阴影

    首先是效果 要让2D显示阴影,首先假设知道Unity阴影来源(shader中的ShadowCaster) 最简单的方法是,首先从官网下载Sprite-Default.Shader,查看源码 然后复制粘 ...

  2. GitLab服务器修改用户密码

    重置密码: 1.切换到相应路径 cd /opt/gitlab/bin/2.进入控制台 gitlab-rails console3.根据序号查询用户账号信息并赋值给u u=User.find(2) [注 ...

  3. 新的学习历程-python1 Hello World

    1 print('hello world!') 2 if 2 > 0: 3 print('ok') 4 print('yes') 5 6 x = 3; y = 4 7 print(x + y) ...

  4. gobuster安装

    Github地址:https://github.com/OJ/gobuste 第一种方式 sudo apt install golang-gogo install github.com/OJ/gobu ...

  5. Linux系统实时监控

    命令 top   Top命令用于实时显示process的动态.参数如下:   d:设置显示的更新速度   q:无延迟的显示速度   c:切换显示模式,一共有两种显示模式,一是只显示执行档,另一种是显示 ...

  6. jreg视频内容整理

    目录 5种变得开心的方法 我(曾经)想死 别再问我过得好不好了 5种变得开心的方法 浪费时间,比如打游戏,什么都不干 停止思考,什么都不要想,刷视频 独处,不要跟别人分享你的痛苦,把自己的痛苦当作世界 ...

  7. JavaScript 数字与字符串的加减乘除运算

    点击跳转 Tips: 除开字符串 + 数字的运算,会产生级联,其他情况下会将 String 转为 number 再进行数字运算. js 运算是从左到右的,所以一步一步来,不要跳步进行运算.

  8. win10上打包的qt程序放到win7上打不开的解决方法

    在win 10 上编写并打包发布了qt5.12.3 msvc2017 32bit的qt程序,在其他win10 电脑上都能正常运行,但是放到win7电脑上,运行exe时依次出现缺少"msvcp ...

  9. 如何实现基于GPIO按键的长按,短按,双击

    不同的架构实现并不相同,所以我分成了两中:STM32平台和其他平台: STM32平台 首先要分析:该如何判断当前的按键状态:单机和双击是通过在有限时间内是否有新的按动作产生 -- 所以需要一个记录按键 ...

  10. Excel条件格式的应用

    一.突出单元格规则 大于/小于/等于/包含/发生日期/重复值 发生日期(自定义)通常通过辅助单元格进行:选中单元格区域,条件格式-新建规则-选择规则类型(使用公式确定要设置的单元格),设置内容如下 二 ...