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 相关文章推荐
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
详解如何运行vue项目
Apr 15 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
分享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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
php session 错误
2009/05/21 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
面包店的创业计划书范文
2014/01/16 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
技校毕业生自荐信
2014/06/03 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
2014年终个人工作总结
2014/11/07 职场文书
法人代表资格证明书
2015/06/18 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
Python实现批量自动整理文件
2022/03/16 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python