写在前面的

这个人第一次尝试开发并发布一个 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的更多相关文章

  1. 一个 Vue 的滑动按钮组件

    git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...

  2. Vue 波纹按钮组件

    代码链接:https://github.com/zhangKunUserGit/vue-component 效果图: 大家可以在线运行: https://zhangkunusergit.github. ...

  3. 手把手教你实现一个 Vue 进度条组件!

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  4. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  5. 手把手教你用Vue造轮子(3):开发可排序的表格组件

    前言 最近闰土大叔跟Vue干上了,没办法,公司业务驱动,不用Vue没招啊,leader尝到了前后端分离带来的好处,除非你离职,哈哈哈,当然,那是不可能的,对于我这种要攒钱买房子的人来说.那还说什么呢, ...

  6. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  7. vue.js原生组件化开发(二)——父子组件

    前言 在了解父子组件之前应先掌握组件开发基础.在实际开发过程中,组件之间可以嵌套,也因此生成父子组件. 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件chi ...

  8. 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  9. 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

    基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...

随机推荐

  1. APACHE服务器出现No input file specified.的完美解决方案

    启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:“No input file specified.” 原因在于使用的PHP是fast_cgi模式,而在某些情况下,不能正确 ...

  2. oracle的下载地址以及步骤

    一.下载地址 1.oracle官网:https://www.oracle.com/cn/index.html 2. 点击右上角先选择语音,然后注册一个新账户,如果有oracle直接登录就可以 3.点击 ...

  3. MessageFormat.format用法

    用法一: package gacl.request.study; import java.io.IOException; import java.text.MessageFormat; import ...

  4. 省市县从数据库读出来的list数据转换成json格式的数据

    一,数据源 1.1,数据库查出来的数据是 两张表先各自左外连接,然后在相互左外连接查找省市县的数据(业务需求必须这样做,省市去的是第一张表,而市县取的是第二张表,两张表中间通过市的名字连接)见这个博文 ...

  5. Linux之网络管理

    一.网络基础 1)ISO/OSI七层模型简介 ISO:国际标准化组织 OSI:开放系统互联模型 IOS:苹果操作系统(在计算机网络中,IOS是互联网操作系统,是思科公司为其网络设备开发的操作维护系统) ...

  6. webpack3配置字体图标和打包相关问题

    webpak配置字体图标有两种方式 一.将字体图标和css打包到同一个文件中. 1.首先需要安装url-loader npm install --save-dev url-loader 2.相关配置如 ...

  7. Python Cookbook(第3版)中文版:15.16 不确定编码格式的C字符串

    15.16 不确定编码格式的C字符串¶ 问题¶ 你要在C和Python直接来回转换字符串,但是C中的编码格式并不确定. 例如,可能C中的数据期望是UTF-8,但是并没有强制它必须是. 你想编写代码来以 ...

  8. mybatis快速入门(二)

    这次接着上次写增删改查吧. 现将上节的方法改造一下,改造测试类. package cn.my.test; import java.io.IOException; import java.io.Inpu ...

  9. 【BZOJ2599】Race(点分治)

    [BZOJ2599]Race(点分治) 题面 BZOJ权限题,洛谷 题解 好久没写过点分治了... 在ppl的帮助下终于想起来了 orz ppl 首先回忆一下怎么求有没有正好是\(K\)的路径 维护一 ...

  10. NOIP2010题解

    所有题目链接均来自洛谷 T1机器翻译 原题戳这里 自古T1是水题 因为每一个数字都小于1000,所以对于是否在队列中可以开数组查询 对于大小的限制,弄一个队列维护大小即可(水题呀...) 这题在Win ...