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 相关文章推荐
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
vue小白入门教程
Apr 02 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
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 simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
linux下编译安装memcached服务
2014/08/03 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
Angular排序实例详解
2017/06/28 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python中方法链的使用方法
2016/02/23 Python
Python对数据库操作
2016/03/28 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
详解python itertools功能
2020/02/07 Python
python使用建议与技巧分享(二)
2020/08/17 Python
python 动态绘制爱心的示例
2020/09/27 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
前厅部经理岗位职责范文
2014/02/04 职场文书
生产文员岗位职责
2014/04/05 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
计算机专业自荐信
2015/03/05 职场文书
入党介绍人意见2015
2015/06/01 职场文书
工作简报范文
2015/07/21 职场文书
安全教育日主题班会
2015/08/13 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers