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
投稿
猜你喜欢
- 经过测试发现mysql中用<>与!=都是可以的,但sqlserver中不识别!=,所以建议用<>selece * f
- 安装anaconda后查询CPU版本时打开Anaconda Prompt输入python然后输入import tensorflow as t
- 一、设置开启SMTP服务并获取授权码可以参考第一篇文章,这里不再赘述:【一】https://www.jb51.net/article/142
- 介绍本文主要介绍Python中列表生成式的基本知识和使用生成列表要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10
- TensorFlow提供了TFRecords的格式来统一存储数据,理论上,TFRecords可以存储任何形式的数据。TFRecords文件中
- 问:如何自己制作验证码的head.fix和body.fix文件答:1 图象绘制完成后,将文件存为24位位图格式的BMP图象文件。 2 去除前
- 数据库属于 IO 密集型的应用程序,其主要职责就是数据的管理及存储工作。而我们知道,从内存中读取一个数据库的时间是微秒级别,而从一块普通硬盘
- 在数据库中执行建表语句CREATE TABLE `sys_acl` ( `id` int(11) NOT NULL AUTO_INCREME
- python3.7 打包成exe程序环境:pycharm2018.1+win7+python3.7工具:pyinstaller1、安装pyi
- 出差到了中国雅虎,这里的风格和淘宝很不一样。和雅虎一比,淘宝的办公环境就是个菜市场,闹哄哄,到处是人,在走道里狂奔乱窜,在每个会议室争得面红
- 引言今天在使用Pytorch导入此前保存的模型进行测试,在过程中发现输出的结果与验证结果差距甚大,经过排查后发现是forward与eval(
- 优化场景利用视图函数(views)查询数据之后可以通过上下文context、字典、列表等方式将数据传递给HTML模板,由template引擎
- 首先确保装了Python,我装的是2.x版本,对了,我的操作系统是WIN7,其实对于Python来说,什么操作系统并不重要。Python内置
- 用Python实现常规的静态网页抓取时,往往是用urllib2来获取整个HTML页面,然后从HTML文件中逐字查找对应的关键字。如下所示:i
- 索引的概念MySQL索引是一种用于加速数据库查询的数据结构,它类似于书籍的目录,能够快速指导我们找到需要的信息。MySQL索引可以根据一定的
- 背景使用python操作一批同样分辨率的图片,合并为tiff格式的文件。由于opencv主要用于读取单帧的tiff文件,对多帧的文件支持并不
- class MyClass(): # 直接将属性定义在类中,这种属性称为 类属性 # 类属性可以通过实列对象和类对象
- 一、心知天气API密钥获取首先,访问https://www.seniverse.com,进行登录或者注册操作,然后在控制台上创建一个免费版的
- 这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。帮助蹲厕族、YP族、饭圈女孩在
- 前言Python多进程适用的场景:计算密集型(CPU密集型)任务Python多线程适用的场景:IO密集型任务计算密集型任务一般指需要做大量的