一个好用精简的vuejs轮播插件——vue-swiper
2023-09-27 14:29:06 时间
这个vue轮播插件只有10k大小,使用十分方便
先放官网的使用方法。
http://www.jianshu.com/p/e11505466851
import Vue from 'vue'
import Swiper from 'vue-swiper'
new Vue({
el: 'body',
components: {Swiper},
methods: {
onSlideChangeStart (currentPage) {
console.log('onSlideChangeStart', currentPage);
},
onSlideChangeEnd (currentPage) {
console.log('onSlideChangeEnd', currentPage);
}
}
});
<swiper v-ref:swiper
direction="horizontal"
:mousewheel-control="true"
:performance-mode="false"
:pagination-visible="true"
:pagination-clickable="true"
:loop=“true”
@slide-change-start="onSlideChangeStart"
@slide-change-end="onSlideChangeEnd">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</swiper>
Api
Properties
Name | Type | Default | Description |
---|---|---|---|
direction | String | "vertical" | Could be 'horizontal' or 'vertical' (for vertical slider). |
mousewheel-control | Boolean | true | Set to true to enable navigation through slides using mouse wheel. |
pagination-visible | Boolean | false | Toggle (hide/true) pagination container visibility when click on Slider's container |
pagination-clickable | Boolean | false | If true then clicking on pagination button will cause transition to appropriate slide. |
performace-mode | Boolean | false | Disable advance effect for better performance. |
loop | Boolean | false | Set to true to enable continuous loop mode |
==================== | ========= | ============ | =================== |
Methods
Method | Description |
---|---|
next() | Go next page. |
prev() | Go previous page. |
setPage(Number ) | Set current page number. |
Events
Name | Parameters | Description |
---|---|---|
slide-change-start | pageNumber | Fire in the beginning of animation to other slide (next or previous). |
slide-change-end | pageNumber | Will be fired after animation to other slide (next or previous). |
slide-revert-start | pageNumber | Fire in the beginning of animation to revert slide (no change). |
slide-revert-end | pageNumber | Will be fired after animation to revert slide (no change). |
slider-move | offset | Callback function, will be executed when user touch and move finger over Swiper and move it. Receives swiper instance and 'touchmove' event as an arguments. |
================== | ================ | ============================ |
使用v-ref:swipe
声明后就可以在vue.js中可以使用this.$refs.swipe
来调用next();prev();setPage(1);
等方法
github地址
相关文章
- (尚017)Vue插件
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
- 【Vue】Vue的安装环境搭建以及vue2.0-devtools和vue3.0-devtools6.0调试插件安装
- vue 常见操作 及 ionic 实战回顾
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- Vue事件修饰符
- Vue - 关闭项目 ESlint 校验(非 Vscode 插件)
- Vue: 全局函数和变量
- vue中$set的实现方法
- VUE-002-前端分页(el-pagination)展示数据
- vue-awesome-swiper 插件
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- Vscode 开发Vue必备插件
- vue 首次install build 失败
- vue项目在git commit时,使用eslint检测
- vue脚手架 环境变量和模式
- vue-resize-split-pane 窗口分隔插件的使用
- vue中使用laydate.js插件
- Vue自定义指令和路由
- vue前台(二)在路由配置项中,配置meta属性来影藏组件
- 前端技术:vue(基本使用+安装chrome vue插件)
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
- vue实现登录、注册、退出、跳转等功能,简单实用
- 手写Vue (1) 数组劫持
- vue 生成二维码:vue-qr插件