在最近做小程序的時(shí)候有這么一個(gè)很常見(jiàn)的需求，加載一個(gè)信息列表，要求需要觸底加載和下拉刷新，我突然想起來(lái)掘金小冊(cè)界面和這個(gè)需求很相似，接下來(lái)我給大家介紹一下我的實(shí)現(xiàn)方案。

觸底加載

步驟如下：

• 封裝一個(gè)loader函數(shù)
• 在監(jiān)聽(tīng)頁(yè)面加載的時(shí)候觸發(fā)這個(gè)loader函數(shù)
• 在監(jiān)聽(tīng)到觸底的時(shí)候再次觸發(fā)這個(gè)函數(shù)

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

注意這里的生命周期函數(shù)：onload為監(jiān)聽(tīng)頁(yè)面加載生命周期，onReachBottom為監(jiān)聽(tīng)觸底動(dòng)作生命周期。

loader函數(shù)思考

loader函數(shù)的封裝首先取決與我們的業(yè)務(wù)邏輯，首先根據(jù)我們的業(yè)務(wù)來(lái)思考，

我們想要通過(guò)觸底來(lái)獲取數(shù)據(jù)，所以我們需要固定住我們每次獲取數(shù)據(jù)的數(shù)量，其次，為了避免重復(fù)，我們不能重復(fù)獲取，就要考慮從為獲取的數(shù)據(jù)項(xiàng)開始獲取，下面實(shí)現(xiàn)過(guò)程中的skip(n)是必要的，即傳進(jìn)來(lái)的參數(shù)為從第n項(xiàng)開始，我們?cè)诒O(jiān)聽(tīng)和觸底傳參都為當(dāng)下數(shù)組的長(zhǎng)度，因?yàn)楫?dāng)頁(yè)面剛加載的時(shí)候數(shù)組長(zhǎng)度為0，當(dāng)觸底的時(shí)候，數(shù)組長(zhǎng)度恰為當(dāng)前已經(jīng)獲取的數(shù)據(jù)項(xiàng)，所以之后就可以獲取未獲得的數(shù)據(jù)并于之前的數(shù)組合并。

loader函數(shù)實(shí)現(xiàn)

其實(shí)loader函數(shù)的實(shí)現(xiàn)才是觸底加載功能的核心，正常情況下觸底加載的邏輯是通過(guò)觸底累加一個(gè)數(shù)字代表頁(yè)碼數(shù)，然后將頁(yè)碼數(shù)發(fā)送給服務(wù)端，服務(wù)端再將信息數(shù)組返回，我使用的是云開發(fā)，所以解決方案有所不同。

• 調(diào)用wx云開發(fā)的api，skip(n)從集合的第n項(xiàng)開始獲取 limit(n)獲取至多n個(gè)元素。
• 通過(guò)get獲取相應(yīng)數(shù)據(jù)，這里為n項(xiàng)后6個(gè)數(shù)據(jù)。
• 通過(guò)cancat()實(shí)現(xiàn)數(shù)組的合并

需要注意的是這里的limit(n)直接使用是有20的長(zhǎng)度限制，如果有剛需，需要獲取20個(gè)以上的數(shù)據(jù)集合，那么我們可以在云函數(shù)中去解決。

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)
            })
        })
    },

觸底加載動(dòng)畫

關(guān)于觸底加載動(dòng)畫，我是在codepen參考的，只需要在觸底的時(shí)候，將控制動(dòng)畫元素的變量更改，在數(shù)據(jù)獲取成功的時(shí)候再改變即可，加載動(dòng)畫代碼如下。

<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);
    }
}

觸底加載的優(yōu)點(diǎn)

在小程序中如果數(shù)據(jù)量過(guò)大，一次性獲取會(huì)加重dom渲染的負(fù)擔(dān)，不僅如此，響應(yīng)的速度也會(huì)如龜速一樣，所以為了用戶的體驗(yàn)，良好的響應(yīng)式交互是必要的，通過(guò)觸底交互，按量加載數(shù)據(jù)，如下，我每次觸底會(huì)加載八份數(shù)據(jù)，然后直到所有數(shù)據(jù)加載完畢，為空。

下拉刷新

小程序下拉刷新頁(yè)面實(shí)現(xiàn)還是很容易的

• 在相應(yīng)頁(yè)面的同級(jí)json文件中配置一下enablePullDownRefresh使其為true，這里是開啟對(duì)應(yīng)頁(yè)面的下拉刷新設(shè)置

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

• 使用onPullDownRefresh監(jiān)聽(tīng)用戶下拉動(dòng)作

  onPullDownRefresh: function () {},

• 調(diào)用wx的加載api

  onPullDownRefresh: function () {
          console.log(1)
          //在標(biāo)題欄中顯示加載
          wx.showNavigationBarLoading() 
          wx.showLoading({
              title: '刷新中...',
          })
          wx.cloud.database().collection('books').skip(0).limit(6).get().then(res => {
              this.setData({
                  books: res.data
              })
              wx.hideLoading();
              //隱藏導(dǎo)航條加載動(dòng)畫
              wx.hideNavigationBarLoading();
              //停止下拉刷新
              wx.stopPullDownRefresh();
          })
      },

  具體api相關(guān)介紹如下:

  • wx.showNavigationBarLoading()在導(dǎo)航條進(jìn)行顯示加載動(dòng)畫
  • wx.hideNavigationBarLoading()隱藏導(dǎo)航條加載動(dòng)畫
  • wx.stopPullDownRefresh()停止下拉刷新

最后

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)觸底加載與下拉刷新的示例代碼的文章就介紹到這了,更多相關(guān)小程序觸底加載與下拉刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論