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 IE中的DOM ready应用技巧
Jul 23 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
详解Python做一个名片管理系统
2019/03/14 Python
Python流程控制 if else实现解析
2019/09/02 Python
Python如何将模块打包并发布
2020/08/30 Python
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
铲车司机岗位职责
2014/03/15 职场文书
超市创业计划书
2014/09/15 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
React配置子路由的实现
2021/06/03 Javascript
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android