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 数组学习资料收集
Apr 11 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
深入理解JS的事件绑定、事件流模型
May 13 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 写文本日志实现代码
2010/05/18 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
jquery tab标签页的制作
2010/05/10 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
jquery常用操作小结
2014/07/21 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
javascript中this的四种用法
2015/05/11 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
对于Python装饰器使用的一些建议
2015/06/03 Python
深入理解Python3中的http.client模块
2017/03/29 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
使用python画社交网络图实例代码
2019/07/10 Python
opencv实现简单人脸识别
2021/02/19 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
运动会稿件200字
2014/02/07 职场文书
出国英文推荐信
2014/05/10 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python