vue-swiper的使用教程


Posted in Javascript onAugust 30, 2018

swiper是我之前做前端页面会用到的一个插件,我自己认为是非常好用的。swiper提供了形式多种多样、适应各个终端的轮播图效果。本文是小编给大家带来的vue-swiper的使用教程。

vue-awesome-swiper官网链接https://www.npmjs.com/package/vue-awesome-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>I'm Slide 1</swiper-slide>
  <swiper-slide>I'm Slide 2</swiper-slide>
  <swiper-slide>I'm Slide 3</swiper-slide>
  <swiper-slide>I'm Slide 4</swiper-slide>
  <swiper-slide>I'm Slide 5</swiper-slide>
  <swiper-slide>I'm Slide 6</swiper-slide>
  <swiper-slide>I'm Slide 7</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>
  <div class="swiper-scrollbar"  slot="scrollbar"></div>
 </swiper>
</template>

<script>
 // swiper options example:
 export default {
  name: 'carrousel',
  data() {
   return {
    swiperOption: {//以下配置不懂的,可以去swiper官网看api,链接http://www.swiper.com.cn/api/
     // notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,<br>


假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
     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
     debugger: true,
    }
   }
  },
 }
</script>

这样就可以使用啦

<-----------------------补充时间2017/9/22 21:00------------------------>

 

平时没怎么用这个插件,今天看了下,发现有点小小的改动,可能导致之前的受到影响,npm包发布者的原话是

// starting with version 2.6.0, you need to manually introduce swiper's css这句话的意思是:从版本2.6.0开始,您需要手动引入swiper的css

require('swiper/dist/css/swiper.css')

我写这篇随笔的时候,还是2.4.2版本,还没有更新到2.6.0版本,所以并没有什么样式上的问题,今天我更新了包试了一下之前写的,发现样式上出问题了。所以才去找的文档,在此补充,希望能帮到各位

Javascript 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
JS实现520 表白简单代码
May 21 Javascript
JS代码优化的8点建议
Feb 04 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 Javascript
分享vue里swiper的一些坑
Aug 30 #Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 #Javascript
小程序图片长按识别功能的实现方法
Aug 30 #Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 #Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 #Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 #Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 #Javascript
You might like
PHP+DBM的同学录程序(3)
2006/10/09 PHP
深入php多态的实现详解
2013/06/09 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
深入理解react 组件类型及使用场景
2019/03/07 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
浅谈Python中的bs4基础
2018/10/21 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
师范生实习的个人自我鉴定
2013/10/20 职场文书
读书之星事迹材料
2014/05/12 职场文书
体育口号大全
2014/06/18 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
教师个人事迹材料
2014/12/17 职场文书
接收函格式
2015/01/30 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书