vue 滑动组件
2023-09-27 14:29:06 时间
https://github.com/warpcgd/vue-slider
vue-slider.js
vue-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端
版本
支持vue2.0+
目前已实现
- 全屏自适应
- 移动端兼容
- 垂直滚动
- 定时自动切换
- 不定宽度滚动
- 无缝循环滚动
未来将实现
- 渐变滚动
- 视差效果
例子
快速开始使用
通过以下demo来实现
app.vue父级组件
<template>
<slider :pages="pages" :sliderinit="sliderinit">
<!-- slot -->
</slider>
</template>
<script>
import slider from './slider'// 引入slider组件
export default {
el: '#app',
data () {
return {
//图片列表[arr]
pages:[
{
title: '',
style:{
background:'url(src/img/testimg-1.jpg)'
}
},
{
title: '',
style:{
background:'url(src/img/testimg-2.jpg)'
}
},
{
title: 'slide3',
style:{
background:'#4bbfc3',
},
}
],
//滑动配置[obj]
sliderinit: {
currentPage: 0,//当前页码
thresholdDistance: 500,//滑动判定距离
thresholdTime: 100,//滑动判定时间
autoplay:1000,//自动滚动[ms]
loop:true//循环滚动
direction:'vertical'//方向设置,垂直滚动
}
}
},
components: {
slider
}
}
</script>
pages/初始化参数
Option | Type | Default | Description |
---|---|---|---|
title | string | - | 当前设置为每页的标题,未来将直接输出html |
style | obj | - | 直接作用在每个item上的style样式,可以输出背景图,背景色,每项宽度可自定义,自动切换为不定宽滚动 |
sliderinit/初始化参数
Option | Type | Default | Description |
---|---|---|---|
direction | string | 'horizontal' | 方向设置,默认为水平滚动('horizontal'),可设置为垂直滚动('vertical') |
currentPage | number | - | 当前为第几页 |
thresholdDistance | number | - | 滑动距离阈值 |
thresholdTime | number | - | 滑动时间阈值 |
autoplay | number[ms] | - | 自动播放:时间[ms] |
loop | boolean | false | 循环滚动 |
API/父级传递的事件
Method | Parameters | Description | Example |
---|---|---|---|
slideTo | number | 滑动到(number)页 | childComponents.$emit('slideTo', num) |
slideNext | - | 滑动到下一页 | childComponents.$emit('slideNext') |
slideTo | - | 滑动到上一页 | childComponents.$emit('slidePre') |
API/父级监听的事件
Method | Parameters | Description | Example |
---|---|---|---|
slide | number | 当前滑动到第(number)页 | childComponents.$on('slide', function(pagenum){console.log(pagenum)}) |
有更好的想法?
欢迎来留下你的意见:https://github.com/warpcgd/vue-slider/issues/1
BUG?oh no!
可以在这里提交,会尽快处理:https://github.com/warpcgd/vue-slider/issues/2
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- (尚021)Vue_eslint编码规范检查
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
- 【Vue】错误提示Parsing error: No Babel config file detected for 的解决办法
- 【Vue】路由组件通过router-link设置css样式及active单击样式
- 微信小程序 - 父组件调用子组件的函数方法(像 Vue.js 中 ref 属性一样,直接 this.$refs.xx 获取子组件数据和方法)详细教程示例代码
- [转]Vue 使用use、prototype自定义自己的全局组件
- [转]Vue导出json数据到Excel表格
- vue 试图改变子组件props 属性值时,控制台报错解决方案
- 【前端】vue组件之间数据传递/父子组件/父传子/子传父/兄弟组件
- Vue源码解读之Dep,Observer和Watcher
- React和Vue组件间数据传递demo
- 如何用vue封装一个防用户删除的平铺页面的水印组件
- vue 关联表单项组件,常用于组合条件
- Vue 组件化
- vue指令与组件
- 用【mysql,vue,node】制作一个前后端分离小项目
- Vue组件间的通信方式(多种场景,通俗易懂,建议收藏)
- Vue--一个页面实现多个同级组件---命名视图实现经典布局(头部,左右布局)
- vue--组件动画效果--淡入淡出--位移
- vue工程化引入组件模板
- 单文件组件.vue---父子组件通信
- vue基础---事件处理
- vue项目中使用地图组件
- Vue之自定义组件的v-model
- vue-admin-template 报错 This project has been renamed to 'tasksfile'. Install using 'npm install tasksfile' instead.
- vue基本使用--refs获取组件或元素
- vue 复制功能
- vue 组件