vue引入新版 vue-awesome-swiper插件填坑问题


Posted in Javascript onJanuary 25, 2018

本文介绍了关于新版 vue-awesome-swiper,分享给大家,具体如下:

问题

  1. 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题?
  2. 为什么我的vue-awesome-swiper不会自动播放?
  3. 为什么我的vue-awesome-swiper没有?

使用

引入(前面的步骤和往常一样)

npm install vue-awesome-swiper --save

在 main,js 里引入(全局): 

import VueAwesomeSwiper from 'vue-awesome-swiper' 
Vue.use(VueAwesomeSwiper) 
import 'swiper/dist/css/swiper.css'

(css 不显示的问题可能就在这)

组件里引入:

import 'swiper/dist/css/swiper.css'  //在全局没引入,这里记得要!
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
 components: {
  swiper,
  swiperSlide
 }
}

配置

template:

<swiper :options="swiperOption">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
 </swiper>

script:

export default {
data() {
 return {
  swiperOption: {
   // 所有的参数同 swiper 官方 api 参数一样
   // 
  }
 }
},
...
 }

重点在于 swiperOption 里面的变化,区别看下图:

vue引入新版 vue-awesome-swiper插件填坑问题

原来 pagination 和 autoplay 要这样配置!

我原来就是在这两处错了,导致 pagination 不显示,图片不轮播。

出错前:

vue引入新版 vue-awesome-swiper插件填坑问题

纠正后:

vue引入新版 vue-awesome-swiper插件填坑问题 

总结

vue-awesome-swiper官网其实早放出说明来了,但自己一看全是英文,就没想看下去。后来发其实很容易看懂得,吸取教训自己多去看看文档,不要找 demo 去抄。

还是少依靠插件,有些插件随时更新,等有能力,自己造!

弄到晚上12点,才弄明白原来 Swiper 版本区分了组件和普通版本,不能看照原来的经验写了。

发现网上关于最新 vue-awesome-swiper就两三篇,而且没说清楚。于是写下这篇,希望对大家有帮助,也希望大家多多支持三水点靠木

Javascript 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
深入探讨前端框架react
Dec 09 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
vue better-scroll插件使用详解
Jan 25 #Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 #jQuery
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 #Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 #Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 #Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 #Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 #Javascript
You might like
我的论坛源代码(十)
2006/10/09 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
原生js调用json方法总结
2018/02/22 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
python实现根据文件格式分类
2019/10/31 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
初一生物教学反思
2014/01/18 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
单位病假条范文
2015/08/17 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android