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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
如何用JS实现简单的数据监听
May 06 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python SVD压缩图像的实现代码
2019/11/05 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
会议开场欢迎词
2014/01/15 职场文书
银行员工职业规划范文
2014/01/21 职场文书
不错的求职信范文
2014/07/20 职场文书
个人总结与自我评价
2014/09/18 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
同学会邀请函模板
2015/01/30 职场文书
感恩的心主题班会
2015/08/12 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
frg-100简单操作(设置)说明
2022/04/05 无线电