vue轮播(完整详细版)
2024-09-27 04:18:59
轮播组件vue
<swiper :options="swiperOption" class='swiper-box'>
<swiper-slide v-for="v in swipers"><img :src="v.fdcImage" class="swiper-img"style="width:100%;height:1.8rem"></swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
安装
npm install vue-awesome-swiper --save
首先在main.js引入
import VueSwiper from 'vue-awesome-swiper'
Vue.use(VueSwiper)
然后就可以用了:
mounted () {
setTimeout(() => {
this.asyncCount = 5
}, 1000)
},
data () {
return {
swiperOption: {
autoplay: 3000,
pagination: '.swiper-pagination',
autoplayDisableOnInteraction: false,
loop: true
},
swipers:[]
}
}
vue-awesome-swiper的API文档:
一、先说一个看关于vue-awesome-swiper的一个坑
vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4",用npm install自动安装依赖时装的版本为"version": "2.6.7",而单独安装(npm install vue-awesome-swiper@2.5.4)的则是正常的"version": "2.5.4"。
这两个版本都是基于swiper3的,从官网上swiper3的教程来看并不需要单独引入样式文件,而2.6.7版本需要单独引入swiper/dist/css目录下的swiper.css样式文件(类似于swiper4)。
并且2.6.7版本swiper位于node_modules/vue-awesome-swiper/node_modules下;2.5.4不需要单独引入样式文件,并且swiper直接位于node_modules文件夹下。
二、基本使用方法
1.安装(略)
2.引用
- /*全局引入*/
- import VueAwesomeSwiper from 'vue-awesome-swiper'
- import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
- Vue.use(VueAwesomeSwiper, /* { default global options } */)
- /*组件方式引用*/
- import 'swiper/dist/css/swiper.css'////这里注意具体看使用的版本是否需要引入样式,以及具体位置。
- import { swiper, swiperSlide } from 'vue-awesome-swiper'
- export default {
- components: {
- swiper,
- swiperSlide
- }
3.使用
就是一般组件的用法
- <swiper :options="swiperOption">
- <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
- <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
- <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
- <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
- <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
- <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
- </swiper>
- <!--以下看需要添加-->
- <div class="swiper-scrollbar"></div> //滚动条
- <div class="swiper-button-next"></div> //下一项
- <div class="swiper-button-prev"></div> //上一项
- <div class="swiper-pagination"></div> //标页码
- data(){
- return{
- swiperOption: {//swiper3
- autoplay: 3000,
- speed: 1000,
- }
- }
- }
三、配置
参数 | 类型(swiper3) | 默认值(swiper3) | 类型(swiper4) | 默认值(swiper4) | 说明 |
---|---|---|---|---|---|
autoplay | Number/Boolean | 0/false | Object | autoplay | 自动切换 |
speed | Number | 300 | Number | 300 | 切换速度 |
loop | Boolean | false | Boolean | false | loop模式 |
loopAdditionalSlides | Number | 0 | Number | 0 | loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。 |
loopedSlides | Number | 1 | Number | 1 | 在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。 |
direction | String | horizontal | String | horizontal | Slides的滑动方向 |
autoplayDisableOnInteraction | Boolean | true | - | - | 用户操作swiper之后,是否禁止autoplay |
autoplayStopOnLast | Boolean | true | - | - | 切换到最后一个slide时停止自动切换 |
grabCursor | Boolean | false | Boolean | false | 鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状 |
width | Number | - | Number | - | 强制Swiper的宽度 |
height | Number | - | Number | - | 强制Swiper的高度 |
autoHeight | Boolean | false | Boolean | false | 自动高度 |
freeMode: | swiper3/4 api相同 | ||||
freeMode | Boolean | false | - | - | free模式,slide会根据惯性滑动且不会贴合 |
freeModeMomentum | Boolean | true | - | - | free模式动量。若设置为false则关闭动量,释放slide之后立即停止不会滑动。 |
freeModeMomentumRatio | Number | 1 | - | - | free模式动量值(移动惯量) |
freeModeMomentumVelocityRatio | Number | 1 | - | - | 动量反弹 |
freeModeMomentumBounce | Boolean | true | - | - | Slides的滑动方向 |
freeModeMomentumBounceRatio | Number | 1 | - | - | 值越大产生的边界反弹效果越明显,反弹距离越大。 |
freeModeSticky | Boolean | false | - | - | 使得freeMode也能自动贴合。 |
effect: | swiper3/4 api相同 | ||||
effect | String | slide | - | - | slide的切换效果。 |
fade/fadeEffect(4) | Object | fade | - | - | fade效果参数。 |
cube/cubeEffect | Object | cube | - | - | cube效果参数。 |
coverflow/coverflowEffect | Object | coverflow | - | - | coverflow效果参数。 |
flip/flipEffect | Object | flip | - | - | flip效果参数。 |
Zoom: | |||||
zoom | Boolean | false | Object | zoom | 焦距功能:双击slide会放大,并且在手机端可双指触摸缩放。 |
zoomMax | Number | 3 | - | - | 最大缩放焦距(放大倍率). |
zoomMin | Number | 1 | - | - | 最小缩放焦距(缩小倍率)。 |
zoomToggle | Boolean | true | - | - | 设置为false,不允许双击缩放,只允许手机端触摸缩放。 |
pagination: | |||||
pagination | String | - | Object | pagination | 分页器容器的css选择器或HTML标签 |
paginationType | String | - | - | - | bullets’ 圆点(默认)‘fraction’ 分式 ‘progress’ 进度条‘custom’ 自定义 |
paginationClickable | Boolean | false | - | - | 点击分页器的指示点分页器控制Swiper切换 |
paginationHide | Boolean | false | - | - | 默认分页器会一直显示 |
paginationElement | String | span | - | - | 设定分页器指示器(小点)的HTML标签。 |
Navigation Buttons: | swiper4 navigation | ||||
nextButton | string / HTMLElement | - | - | - | 前进按钮的css选择器或HTML元素。 |
prevtButton | string / HTMLElement | - | - | - | 后退按钮的css选择器或HTML元素。 |
Scrollbar: | |||||
scrollbar | string / HTMLElement | - | Object | swiper4 Scrollbar | Scrollbar容器的css选择器或HTML元素 |
scrollbarHide | Bolean | true | - | - | 滚动条是否自动隐藏。 |
scrollbarDraggable | Boolean | false | - | - | 该参数设置为true时允许拖动滚动条。 |
scrollbarSnapOnRelease | Boolean | false | - | - | 如果设置为true,释放滚动条时slide自动贴合。 |
- autoplay: {
- delay: 3000, //自动切换的时间间隔,单位ms
- stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
- stopOnLastSlide: true, //如果设置为true,当切换到最后一个slide时停止自动切换。
- disableOnInteraction: true, //用户操作swiper之后,是否禁止autoplay。
- reverseDirection: true, //开启反向自动轮播。
- waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
- },
- fadeEffect: {
- crossFade: false,
- }
- cubeEffect: {
- slideShadows: true, //开启slide阴影。默认 true。
- shadow: true, //开启投影。默认 true。
- shadowOffset: 100, //投影距离。默认 20,单位px。
- shadowScale: 0.6 //投影缩放比例。默认0.94。
- },
- coverflowEffect: {
- rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。
- stretch: 10, //每个slide之间的拉伸值,越大slide靠得越紧。 默认0。
- depth: 60, //slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
- modifier: 2, //depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
- slideShadows : true //开启slide阴影。默认 true。
- },
- flipEffect: {
- slideShadows : true, //slides的阴影。默认true。
- limitRotation : true, //限制最大旋转角度为180度,默认true。
- }
- zoom: {
- maxRatio: 5, //最大倍数
- minRatio: 2, //最小倍数
- toggle: false, //不允许双击缩放,只允许手机端触摸缩放。
- containerClass: 'my-zoom-container', //zoom container 类名
- },
- navigation: {
- nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
- prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
- hideOnClick: true, //点击slide时显示/隐藏按钮
- disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
- hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
- },
- pagination: {
- el: '.swiper-pagination',
- type: 'bullets',
- //type: 'fraction',
- //type : 'progressbar',
- //type : 'custom',
- progressbarOpposite: true, //使进度条分页器与Swiper的direction参数相反
- bulletElement : 'li', //设定分页器指示器(小点)的HTML标签。
- dynamicBullets: true, //动态分页器,当你的slide很多时,开启后,分页器小点的数量会部分隐藏。
- dynamicMainBullets: 2, //动态分页器的主指示点的数量
- hideOnClick: true, //默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。
- clickable: true, //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
- },
- scrollbar: {el: '.swiper-scrollbar', hide: true, //滚动条是否自动隐藏。默认:false,不会自动隐藏。
- draggable: true, //该参数设置为true时允许拖动滚动条。
- snapOnRelease: true, //如果设置为false,释放滚动条时slide不会自动贴合。
- dragSize: 30, //设置滚动条指示的尺寸。默认'auto': 自动,或者设置num(px)。
- }
最新文章
- 用MongoDB分析合肥餐饮业
- Android布局中实现圆角边框
- 脱离 Spring 实现复杂嵌套事务,之一(必要的概念)
- 《Getting Started with Storm》章节一 基础
- Android签名详解(debug和release)
- apache asp.net
- 15分钟弄懂 const 和 #define
- XMPP基础
- JS之路——数组对象
- ASP.NET中IsPostBack详解
- linux expect, spawn用法小记
- 在Centos7x上部署docker
- Vue渐进式JavaScript 框架
- 设备树中ranges属性分析(1)
- mongoDB3.4的sharding集群搭建及JavaAPI的简易使用
- 九、持久层框架(MyBatis)
- P3810 【模板】三维偏序(陌上花开)
- Unity主线程和子线程跳转调用(2)
- zookeeper安装和配置(单机+伪集群+集群)
- c# webBrowser打开pdf问题
热门文章
- <;<;网络是怎样连接的>;>;笔记第2章用电信号传输Tcp/ip数据
- iTerm2的设置和Zsh.
- [转]PowerDesigner 把Comment写到name中 和把name写到Comment中 pd7以后版本可用
- Oracle Sourcing Implementation and Administration Guide(转)
- 谈谈我对";闭包";的理解
- How to get the full error stack trace of SharePoint
- JS查找孩子节点
- 重新学习之spring第二个程序,配置AOP面向切面编程
- 设计模式(Python)-简单工厂,工厂方法和抽象工厂模式
- 深入理解Java虚拟机,gc输出参数