微信小程式-wepy-側滑刪除元件，支援自定義內容區在

摘要： 在最近的微信小程式開發過程中需要用到側滑刪除的功能，微信小程式官方是沒有提供這樣的元件，再加上我們的微信小程式使用的是wepy元件開發框架開發的，wepy也沒有提供這樣的元件，之前也在github上搜索這方面的元件，沒有發現合適的，當時只發現了一個開源的: github.com/GeoffZ...

在最近的微信小程式開發過程中需要用到側滑刪除的功能，微信小程式官方是沒有提供這樣的元件，再加上我們的微信小程式使用的是wepy元件開發框架開發的，wepy也沒有提供這樣的元件，之前也在github上搜索這方面的元件，沒有發現合適的，當時只發現了一個開源的: github.com/GeoffZhu/we… 只不過該元件功能單一已經被作者廢棄了，無奈自己動手擼了一個側滑刪除元件，現在把它開源出來吧。

傳送門: github.com/hu670014125…

Requirements

• wepy: "^1.7.3"

支援功能和特點

• 自定義內容區域：支援之定義內容區域，元件內使用 slot佔位。
• 自定義滾動高度：可以自定義scroll-view的高度，預設為螢幕的高度。
• 自定義menu ：如果預設的menu樣式不喜歡可以自定義，也可以顯示或者隱藏指定的menu。
• 左右滑動：支援左右滑動也可以設定只左右或者右滑。

效果如下：

如何使用

目前支援兩種使用模式：

1.page頁面模式

優點：可定製化高，擴充套件性強。
缺點：整合複雜，程式碼複用性差。複製程式碼

2.component 元件模式

優點：整合簡單，程式碼複用性強，減少包的大小。
缺點：可定製到低。複製程式碼

不建議使用page頁面模式，下面詳細介紹component 元件模式的使用

如何使用

// 匯入元件
import SwipeDeleteView from '@/components/wepy-swipe-delete-view'

// 宣告元件

 components = {
swipeDelete: SwipeDeleteView
}

// 引用元件
<template>
<swipeDelete :list.sync="list">
<view class="item">{{item.userName}}</view>
</swipeDelete>
</template>複製程式碼

配置如下：

<swipeDelete:list.sync="list"
:scrollHeight="scrollHeight"
@deleteTap.user="deleteTap"
@deleteLongTap.user="deleteLongTap"
@editTap.user="editTap"
@editLongTap.user="editLongTap"
@addTap.user="addTap"
@addLongTap.user="addLongTap"
@markTap.user="markTap"
@markLongTap.user="markLongTap">複製程式碼

屬性	屬性說明	備註
list	要顯示的列表的原始資料，最好是加上.sync這樣可以非同步傳值	必傳
scrollHeight	設定scroll-view的高度，預設為螢幕高度	選傳
deleteTap.user	刪除menu單擊事件回撥	必要時傳
deleteLongTap.user	刪除menu長按事件回撥	必要時傳
editTap.user	編輯menu單擊事件回撥	必要時傳
editLongTap.user	編輯menu長按事件回撥	必要時傳
addTap.user	新增menu單擊事件回撥	必要時傳
addLongTap.user	新增menu長按事件回撥	必要時傳
markTap.user	標記menu單擊事件回撥	必要時傳
markLongTap.user	標記menu長按事件回撥	必要時傳

每個點選事件或者長按事件都會返回兩個引數

methods = {
deleteTap(view, item) {
console.log(item)
view.deleteItem()
},
deleteLongTap(view, item) {
console.log(item)
wx.showModal({
title: '提示',
content: '確定要刪除嗎？',
success: function (res) {
if (res.confirm) {
view.deleteItem()
} else {
view.closeItem()
}
}
})
}
}複製程式碼

• view ：view 是SwipeDeleteView物件的本身，可以通過view來做一些其他操作，如:刪除當前的item
• item : item 就是當前操作的原始資料，可以通過item獲取真正需要的資料

當前SwipeDeleteView對外暴露的函式有：

函式名稱	函式說明	引數
deleteItem	刪除當前操作的item(原始資料+view)都會被刪除	不需要引數
closeItem	關閉當前操作的item，原始資料不變	不需要引數

如果在使用的過程中遇到什麼問題可以告訴我，我及時修復。

郵箱：[email protected]