微信小程序實現觸底加載與下拉刷新的示例代碼

Posted on by

在最近做小程序的時候有這麼一個很常見的需求，加載一個信息列表，要求需要觸底加載和下拉刷新，我突然想起來掘金小冊界面和這個需求很相似，接下來我給大傢介紹一下我的實現方案。

觸底加載

步驟如下：

  • 封裝一個loader函數
  • 在監聽頁面加載的時候觸發這個loader函數
  • 在監聽到觸底的時候再次觸發這個函數
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參考的，隻需要在觸底的時候，將控制動畫元素的變量更改，在數據獲取成功的時候再改變即可，加載動畫代碼如下。

<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>
.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渲染的負擔，不僅如此，響應的速度也會如龜速一樣，所以為瞭用戶的體驗，良好的響應式交互是必要的，通過觸底交互，按量加載數據，如下，我每次觸底會加載八份數據，然後直到所有數據加載完畢，為空。

下拉刷新

小程序下拉刷新頁面實現還是很容易的

  • 在相應頁面的同級json文件中配置一下enablePullDownRefresh使其為true，這裡是開啟對應頁面的下拉刷新設置

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

  • 使用onPullDownRefresh監聽用戶下拉動作

    onPullDownRefresh: function () {},

  • 調用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()停止下拉刷新

最後

到此這篇關於微信小程序實現觸底加載與下拉刷新的示例代碼的文章就介紹到這瞭,更多相關小程序觸底加載與下拉刷新內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：