小程式觸底載入與下拉重新整理功能的設計與實現

語言: CN / TW / HK
時間 2022-05-26 20:15:15

theme: cyanosis

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第2天，點選檢視活動詳情

微信小程式實現觸底載入與下拉重新整理

在最近做小程式的時候有這麼一個很常見的需求，載入一個資訊列表，要求需要觸底載入和下拉重新整理，我突然想起來掘金小冊介面和這個需求很相似，接下來我給大家介紹一下我的實現方案。

動畫.gif

觸底載入

步驟如下：

  1. 封裝一個loader函式
  2. 在監聽頁面載入的時候觸發這個loader函式
  3. 在監聽到觸底的時候再次觸發這個函式

onLoad: function (options) {    this.loadBooks(this.data.books.length) }, onReachBottom: function () {    this.loadBooks(this.data.books.length) }, loadBooks: function () {     },

注意這裡的生命週期函式：onload為監聽頁面載入生命週期，onReachBottom為監聽觸底動作生命週期。

loader函式思考

loader函式的封裝首先取決與我們的業務邏輯，首先根據我們的業務來思考，

我們想要通過觸底來獲取資料，所以我們需要固定住我們每次獲取資料的數量，其次，為了避免重複，我們不能重複獲取，就要考慮從為獲取的資料項開始獲取，下面實現過程中的skip(n)是必要的，即傳進來的引數為從第n項開始，我們在監聽和觸底傳參都為當下陣列的長度，因為當頁面剛載入的時候陣列長度為0，當觸底的時候，陣列長度恰為當前已經獲取的資料項，所以之後就可以獲取未獲得的資料並於之前的數組合並。

loader函式實現

其實loader函式的實現才是觸底載入功能的核心，正常情況下觸底載入的邏輯是通過觸底累加一個數字代表頁碼數，然後將頁碼數傳送給服務端，服務端再將資訊陣列返回，我使用的是雲開發，所以解決方案有所不同。

  • 呼叫wx雲開發的api，skip(n)從集合的第n項開始獲取 limit(n)獲取至多n個元素。
  • 通過get獲取相應資料，這裡為n項後6個數據。
  • 通過cancat()實現陣列的合併 需要注意的是這裡的limit(n)直接使用是有20的長度限制，如果有剛需，需要獲取20個以上的資料集合，那麼我們可以在雲函式中去解決。

loadBooks: function (n) {        wx.cloud.database().collection('books').skip(n).limit(6).get().then(res => {            console.log(res.data)            this.setData({                books: this.data.books.concat(res.data)           })       })   },

觸底載入動畫

關於觸底載入動畫，我是在codepen參考的，只需要在觸底的時候，將控制動畫元素的變數更改，在資料獲取成功的時候再改變即可，載入動畫程式碼如下。 wxml <view class="loader" wx:if="{{isLoader}}"> <view class="dot"></view> <view class="dot"></view> <view class="dot"></view> <view class="dot"></view> <view class="dot"></view> </view> ```css .dot { width: 24rpx; height: 24rpx; background: #3ac; border-radius: 100%; display: inline-block; animation: slide 1s infinite; }

.dot:nth-child(n) { animation-delay: 0.1s; background: #6cd793; }

@keyframes slide { 0% { transform: scale(1); } 50% { opacity: .3; transform: scale(2); } 100% { transform: scale(1); } } ```

觸底載入的優點

在小程式中如果資料量過大，一次性獲取會加重dom渲染的負擔，不僅如此，響應的速度也會如龜速一樣，所以為了使用者的體驗，良好的響應式互動是必要的，通過觸底互動，按量載入資料，如下，我每次觸底會載入八份資料，然後直到所有資料載入完畢，為空。

image.png

下拉重新整理

小程式下拉重新整理頁面實現還是很容易的

  1. 在相應頁面的同級json檔案中配置一下enablePullDownRefresh使其為true，這裡是開啟對應頁面的下拉重新整理設定

    { "usingComponents": {}, "enablePullDownRefresh": true, }

  2. 使用onPullDownRefresh監聽使用者下拉動作

    onPullDownRefresh: function () {},

  3. 呼叫wx的載入api

    onPullDownRefresh: function () {        console.log(1)        //在標題欄中顯示載入        wx.showNavigationBarLoading()        wx.showLoading({            title: '重新整理中...',       })        wx.cloud.database().collection('books').skip(0).limit(6).get().then(res => {            this.setData({                books: res.data           })            wx.hideLoading();            //隱藏導航條載入動畫            wx.hideNavigationBarLoading();            //停止下拉重新整理            wx.stopPullDownRefresh();       })   }, 具體api相關介紹如下:

    • wx.showNavigationBarLoading()在導航條進行顯示載入動畫
    • wx.hideNavigationBarLoading()隱藏導航條載入動畫
    • wx.stopPullDownRefresh()停止下拉重新整理

    最後

    掘友大佬們有更好的想法在評論區留言，我會完善我的xxx山

「」
「」