VueAwesomeSwiper在VUE中的使用以及遇到的一些问题


Posted in Javascript onJanuary 11, 2018

Vue-Awesome-Swiper

轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使用的比较频繁的插件,现在分享一下使用方法以及开发中会遇到的一些问题。

我们先下载包,然后去main.js里面配置。

npm install vue-awesome-swiper --save

我们可以用import的方法

//import
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

也可以用require

var Vue = require('vue')
var VueAwesomeSwiper = require('vue-awesome-swiper')

两者都可以达到目的,然后再mian.js里面全局注册

Vue.use(VueAwesomeSwiper)

在模板里使用

import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
 components: {
  swiper,
  swiperSlide
 }
}
<template>
 <swiper :options="swiperOption" ref="mySwiper">
  <!-- slides -->
  <swiper-slide v-for="slide in swiperSlides" v-bind:style="{ 'background-image': 'url(' + slide + ')' }" :key="slide.id"></swiper-slide>
  <!-- Optional controls -->
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
 </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 name: 'carrousel',
 components: {
  swiper,
  swiperSlide
 },
 data () {
  return {
   swiperOption: { //以下配置不懂的,可以去swiper官网看api,链接http://www.swiper.com.cn/api/
    notNextTick: true, // notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
    autoplay: true,
    loop: true,
    direction: 'horizontal',
    grabCursor: true,
    setWrapperSize: true,
    autoHeight: true,
    pagination: {
     el: '.swiper-pagination'
    },
    centeredSlides: true,
    paginationClickable: true,
    navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev'
    },
    keyboard: true,
    mousewheelControl: true,
    observeParents: true, // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger
    debugger: true
   },
   swiperSlides: ['../../static/img/swiper1.jpg', '../../static/img/swiper2.jpg', '../../static/img/swiper3.jpg', '../../static/img/swiper4.jpg']
  }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
html, body, #app {
 height: 100%;
 width: 100%;
}
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
 height: 100vh;
}
.swiper-pagination-bullet {
 width: 15px;
 height: 15px;
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
 bottom: 8%;
}
</style>

这样就可以正常使用了,但是以下是一些开发中遇到的一些问题。

很多人在引入swiper的时候会出现小点swiper-pagination出不来或者一些配置属性没有生效。原因是现在最新的swiper版本已经开始区分组件和普通版本了。

在低版本swiper中,我们可以这么写(我相信大部分童鞋百度,论坛到的使用方法大多是这样子的)

<script>
 // swiper options example:
 export default {
  name: 'carrousel',
  data() {
   return {
    swiperOption:
     notNextTick: true,
     // swiper configs 所有的配置同swiper官方api配置
     autoplay: 3000,
     direction: 'vertical',
     grabCursor: true,
     setWrapperSize: true,
     autoHeight: true,
     pagination: '.swiper-pagination',
     paginationClickable: true,
     prevButton: '.swiper-button-prev',//上一张
     nextButton: '.swiper-button-next',//下一张
     scrollbar: '.swiper-scrollbar',//滚动条
     mousewheelControl: true,
     observeParents: true,
     debugger: true,
    }
   }
  },
 
 }
</script>

注意!!!!

这其中的autoplay和pagination和prevButton和nextButton等属性,在低版本中是允许这么使用的,并且可以功能正常生效,但是再高版本swiper中这样写不会生效,并且vue不会报错。

接下来我们看官网api,拿分页器pagination举个栗子:

VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

在以前低版本的swiper是没有这样子的区分的!所以现在我们可以看看最新版本的swiper分页器的具体文档:

VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

图中标记的部分很明显已经不同于低版本的swiper的使用方法。

还有一些区别官网的api已经写的很清楚了,感兴趣的小伙伴可以自行在官网api中阅读查看噢!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
angular2中Http请求原理与用法详解
Jan 11 #Javascript
基于node下的http小爬虫的示例代码
Jan 11 #Javascript
JS脚本实现网页自动秒杀点击
Jan 11 #Javascript
Javascript网页抢红包外挂实现分享
Jan 11 #Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 #Javascript
React 高阶组件入门介绍
Jan 11 #Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 #Javascript
You might like
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
python文件操作之目录遍历实例分析
2015/05/20 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
团购业务员岗位职责
2014/03/15 职场文书
自动一体化专业求职信
2014/03/15 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
世界名著读书笔记
2015/06/25 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书