vue-swiper的使用教程
作者:流浪_光头 发布时间:2024-04-27 16:17:56
标签:vue,swiper
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版本,所以并没有什么样式上的问题,今天我更新了包试了一下之前写的,发现样式上出问题了。所以才去找的文档,在此补充,希望能帮到各位
来源:https://www.cnblogs.com/maomao93/p/6830626.html
0
投稿
猜你喜欢
- 这是一个系列文章,主要分享python的使用建议和技巧,每次分享3点,希望你能有所收获。1 如何创建指定长度且有特定值的list不推荐方式l
- 也许有人会说我火星了,但我的确是第一次知道,欢迎我从火星归来吧。在 Yahoo! 首页上隐藏着这样一个小秘密,大家到 www.yahoo.c
- 前言常见的例子是在银行账户上:假如要在两个银行账户之间执行交易,你必须确保两个账户都被锁定,不受其他交易的影响,以达到正确的资金转移量。在这
- typora使用latex进行公式的编写,下面是具体的行间公式和行内公式的快捷键方法:CTRL+SHIFT+M开启行间公式$$开启行内公式1
- 看看这个指令在ASP程序中的应用,有[delete from 歌手 where 艺名='cs2000'],删除艺名为cs20
- 假设我们有一幅图像,图像中的文本被旋转了一个未知的角度。为了对文字进行角度的校正,我们需要完成如下几个步骤:1、检测出图中的文本范围2、计算
- 使用字符串时,常见的操作之一是使用给定的分隔符将字符串拆分为子字符串数组。在本文中,我们将讨论如何在Python中拆分字符串。.split(
- 今天我去隽辰的博客去看他的文章,在读完他的文章之后,我很自然的就去读网友们给他留的评论,在读的时候我发现他的评论是顺序的,也就是最早的评论在
- 快速排序(QuickSort)是对冒泡排序的一种改进:基本思想:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一
- 平时在PL/SQL中的编程中遇到一些问题,这里以问答的形式来进行把它们总结下来,以供大家分享。1、当需要向表中装载大量的数据流或者需要处理大
- 1. 列表1.1 列表的定义List(列表) 是Python 中使用最频繁的数据类型,在其他语言中通常叫做数组专门用于存储一串 信息列表用[
- 安装了python3之后,会有pip31. 使用pip install XXX新安装的库会放在这个目录下面python2.7/site-pa
- PHP程序员玩转Linux系列文章:1.PHP程序员玩转Linux系列-怎么安装使用CentOS2.PHP程序员玩转Linux系列-lnmp
- 简介rpc:远程过程调用协议。简单的来说就是客户端可以很方便得远程调用服务端的接口程序,而不用管底层是如何实现的。XML-RPC的全称是XM
- 求最大公约数是习题中比较常见的类型,下面小编会给大家提供五种比较常见的算法,记得帮忙点个赞哦!一般来说,最大公约数的求法大概有5种方法一:短
- 使用PHP GD,使用良好,一键剪裁各种尺寸,打包下载。经常换icon的懂的,美工给你一个1024的logo,你得ps出各种尺寸,于是有了这
- 操作字符串的值是一般的开发人员必须面临的家常便饭。操作字符串的具体方式有很多,比如说从一个字符串是提取出一部分内容来,或者确定一个字符串是否
- 前言今天,我无聊的时候做了一个搜索文章的软件,有没有更加的方便快捷不知道,好玩就行了。基于Python tkinter 制作文章
- 目录图片验证码登陆点击个人用户登录获取图片验证码识别并登陆识别较复杂验证码算法其他上一篇介绍了使用python模拟登陆网站,但是登陆的网站都
- 本文实例为大家分享了python放大图片和画方格的具体代码,供大家参考,具体内容如下1、Python 放大图片和画方格算法#!C:/Pyth