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

囧囧愛學習發表於2019-02-13
微信小程式元件

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

傳送門:github.com/hu670014125…

Requirements

  • wepy: "^1.7.3"

支援功能和特點

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

效果如下：

image image image image image image image image

如何使用

目前支援兩種使用模式：

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，原始資料不變不需要引數

網路非同步載入更新

如果使用的網路非同步載入完成以後，還需要更新下元件，不然會出現無法側滑的情況。

  • 導致原因：原始資料更新以後元件內部無法監聽到，這樣就不能獲取到左右menu的寬度，所以不能側滑
  • 解決辦法：this.$invoke('swipeDelete', 'update'); swipeDelete必須和 components = {swipeDelete: SwipeDeleteView} 同名。

程式碼如下：

// 模擬網路載入延遲2秒鐘
   let that = this
     setTimeout(function () {
       for (let i = 0; i < 20; i++) {
         let msg = {}
         msg.userName = '' + '使用者' + (i + 1)
         msg.msgText = '您有新的訊息'
         msg.color = that.buildRandomColor()
         msg.height = that.buildRandomHeight()
         msg.headerImg = options.avatarUrl
         that.list.push(msg)
       }
       wx.hideLoading()
       // 更新元件
       that.$invoke('swipeDelete', 'update')
       that.$apply()
     }, 2000)複製程式碼


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

郵箱：hu670014125@163.com


相關文章