自己开发的 vue 滑动按钮组件 vue-better-slider
写在前面的
这个人第一次尝试开发并发布一个 vue 的组件,该组件实现了类似 ios 手机淘宝客户端 -> 消息界面中消息的滑动删除功能等,如下为该组件的文档。
一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 better-scroll 的实现。
起步
安装
npm i --save vue-sliding-button
引入
import Vue from 'vue' import SlidingButton from 'vue-sliding-button' Vue.use(SlidingButton)
使用
<template> <div> <better-slider> <div slot="front" class="front"> 前面的内容 </div> <div slot="back" class="back"> 后面的内容 </div> </better-slider> </div> </template> <script> </script>
原理
布局
绿色部分为 wrapper,它拥有两个子元素为 back 和 front,它的高度会被 front 撑起。黄色部分为 back,它使用绝对定位,它的高度与 wrapper 相同,值得注意的是为了提高性能,back 在用户触摸该控件是才被插入。front 与 back 同级。
关闭
组件提供关闭动画,调用组件的 close 方法使用,可以通过监听 clickBackEvent 等事件,通过传入的组件引用已调用该方法。需要注意的是,该方法并不会删除该组件,可以通过监听 closeTransitionEndEvent 事件,在其中进行自己的处理。
选项
SlidingButton 支持很多属性。
right
- 类型:Number
- 默认值:80
- 作用:从左向右滑动时,右边展示宽度
left
- 类型:Number
- 默认值:80
- 作用:从右向左滑动时,左边展示宽度
rightBackgroundColor
- 类型:Number
- 默认值:80
- 作用:从左向右滑动时,组件底色,主要用于关闭动画
leftBackgroundColor
- 类型:Number
- 默认值:0
- 作用:从右向左滑动时,组件底色,主要用于关闭动画
momentum
- 类型:Boolean
- 默认值:true
- 作用:表示是否开启惯性动画
momentumTime
- 类型:Number
- 默认值:100
- 作用:表示惯性动画持续时间
deceleration
- 类型:Number
- 默认值:0.01
- 作用:表示惯性动画的减速度
closeTime
- 类型:Number
- 默认值:300
- 作用:表示关闭动画的持续时间
trigger
- 类型:Boolean
- 默认值:true
- 作用:该属性为 true 或 false 并无区别,只要该值发生改变,且用户没有触摸该组件时,就会将组件的 front 置于原始位置。当在列表中使用多个该组件时,可以使用该属性。
事件
注意:event 是事件原生参数,component 是指向该组件的引用。
clickBackEvent
- 参数:{ Object }.{ event, component }
- 触发时机:用户点击 back 时
clickFrontEvent
- 参数:{ Object }.{ event, component }
- 触发时机:用户点击 front 时
touchStartEvent
- 参数:{ Object }.{ event, component }
- 触发时机:用户开始触摸该组件时
closeTransitionEndEvent
- 参数:{ Object }.{ event, component }
- 触发时机:关闭动画结束时调用
自己开发的 vue 滑动按钮组件 vue-better-slider的更多相关文章
- 一个 Vue 的滑动按钮组件
git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...
- Vue 波纹按钮组件
代码链接:https://github.com/zhangKunUserGit/vue-component 效果图: 大家可以在线运行: https://zhangkunusergit.github. ...
- 手把手教你实现一个 Vue 进度条组件!
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
- Vue ---- 组价 组件化 子传父 父传子
目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...
- 手把手教你用Vue造轮子(3):开发可排序的表格组件
前言 最近闰土大叔跟Vue干上了,没办法,公司业务驱动,不用Vue没招啊,leader尝到了前后端分离带来的好处,除非你离职,哈哈哈,当然,那是不可能的,对于我这种要攒钱买房子的人来说.那还说什么呢, ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- vue.js原生组件化开发(二)——父子组件
前言 在了解父子组件之前应先掌握组件开发基础.在实际开发过程中,组件之间可以嵌套,也因此生成父子组件. 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件chi ...
- 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)
在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
随机推荐
- APACHE服务器出现No input file specified.的完美解决方案
启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:“No input file specified.” 原因在于使用的PHP是fast_cgi模式,而在某些情况下,不能正确 ...
- oracle的下载地址以及步骤
一.下载地址 1.oracle官网:https://www.oracle.com/cn/index.html 2. 点击右上角先选择语音,然后注册一个新账户,如果有oracle直接登录就可以 3.点击 ...
- MessageFormat.format用法
用法一: package gacl.request.study; import java.io.IOException; import java.text.MessageFormat; import ...
- 省市县从数据库读出来的list数据转换成json格式的数据
一,数据源 1.1,数据库查出来的数据是 两张表先各自左外连接,然后在相互左外连接查找省市县的数据(业务需求必须这样做,省市去的是第一张表,而市县取的是第二张表,两张表中间通过市的名字连接)见这个博文 ...
- Linux之网络管理
一.网络基础 1)ISO/OSI七层模型简介 ISO:国际标准化组织 OSI:开放系统互联模型 IOS:苹果操作系统(在计算机网络中,IOS是互联网操作系统,是思科公司为其网络设备开发的操作维护系统) ...
- webpack3配置字体图标和打包相关问题
webpak配置字体图标有两种方式 一.将字体图标和css打包到同一个文件中. 1.首先需要安装url-loader npm install --save-dev url-loader 2.相关配置如 ...
- Python Cookbook(第3版)中文版:15.16 不确定编码格式的C字符串
15.16 不确定编码格式的C字符串¶ 问题¶ 你要在C和Python直接来回转换字符串,但是C中的编码格式并不确定. 例如,可能C中的数据期望是UTF-8,但是并没有强制它必须是. 你想编写代码来以 ...
- mybatis快速入门(二)
这次接着上次写增删改查吧. 现将上节的方法改造一下,改造测试类. package cn.my.test; import java.io.IOException; import java.io.Inpu ...
- 【BZOJ2599】Race(点分治)
[BZOJ2599]Race(点分治) 题面 BZOJ权限题,洛谷 题解 好久没写过点分治了... 在ppl的帮助下终于想起来了 orz ppl 首先回忆一下怎么求有没有正好是\(K\)的路径 维护一 ...
- NOIP2010题解
所有题目链接均来自洛谷 T1机器翻译 原题戳这里 自古T1是水题 因为每一个数字都小于1000,所以对于是否在队列中可以开数组查询 对于大小的限制,弄一个队列维护大小即可(水题呀...) 这题在Win ...