微信小程序實現下滑到底部進行自動翻頁功能

前言

這段時間接了一個微信小程序項目，從此打開小程序的新世界大門。然後發現使用頁碼進行翻頁已經不適用於手機app，我們日常中實用的手機app或者小程序進行翻頁一般都是使用底部後下拉的方式。

解決思路

我發現微信小程序遠程組件提供了一個scroll-view(可滾動視圖區域)，這個組件中有個屬性，bindscrolltolower能夠監聽區域內滑到了最後一個位置。這就能用來解決和實現我們提出的問題。當用戶滑到最後一個元素，觸發函數，我們在該函數中請求下一頁的數據，然後追加到展示列表裏。ps：需要一個變量來存儲當前頁碼

實現

wxml:

<scroll-view class="scroll_view" scroll-y bindscrolltolower="nextPage">
	<view style="height:100vh">
    <block wx:for="{{lists}}" wx:for-index="index" wx:for-item="item" wx:key="unique">
      <view style="height:10vh;border:1rpx solid red">
        {{item}}
      </view>
    </block>
	</view>
</scroll-view>

wxss:

.scroll_view{
  height:100vh;
}

js:

Page({

  data: {
    lists: [],
    page: 1
  },
  //監聽是否滑到底部
  nextPage: function () {
    let new_lists = [];
    let page = this.data.page;
    let startindex = page * 10 + 1;
    console.log("第" + page + "頁滑到底部了,請求第" + (page + 1) + "頁");
    page += 1;
    //模擬請求
    for (let i = startindex; i <= startindex + 9; i++) {
      new_lists.push(i);
    }
    this.setData({ lists: this.data.lists.concat(new_lists), page: page });
  },
  onLoad: function (options) {
    let lists = [];
    //模擬請求
    for (let i = this.data.page; i <= this.data.page + 9; i++) {
      lists.push(i)
    }
    this.setData({ lists: lists, });
  },
})

效果:

說明

我這裏沒有做判斷是否請求到最後一頁，我們一般後臺邏輯是當請求當前頁碼爲空時說明上一頁已經是最後一頁了。我們可以在nextPage函數論進行相應的邏輯判斷處理，我這裏就不展示了，大家自己實現，不會的給我留個言。