寫在前面的

這個人第一次嘗試開發並發布一個 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