前言

這段時間接了一個微信小程式專案，從此開啟小程式的新世界大門。然後發現使用頁碼進行翻頁已經不適用於手機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函式論進行相應的邏輯判斷處理，我這裡就不展示了，大家自己實現，不會的給我留個言。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。