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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
国外的为初学者写的JavaScript教程
Jun 09 Javascript
小议Javascript中的this指针
Mar 18 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
layui实现三级导航菜单
Jul 26 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
判断复选框是否被选中的两种方法
2014/06/04 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
js实现随机点名小功能
2017/08/17 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python实现汉诺塔递归算法经典案例
2021/03/01 Python
python 读入多行数据的实例
2018/04/19 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python 从attribute到property详解
2020/03/05 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
大学生职业规划前言模板
2013/12/27 职场文书
社区十八大感言
2014/01/19 职场文书
承诺书模板
2014/08/30 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
Python Pandas 删除列操作
2022/03/16 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技