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

前言

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

解決思路

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

實現

wxml:

1. <scroll-view class="scroll_view" scroll-y bindscrolltolower="nextPage">
2. <view style="height:100vh">
3. <block wx:for="{{lists}}" wx:for-index="index" wx:for-item="item" wx:key="unique">
4. <view style="height:10vh;border:1rpx solid red">
5. {{item}}
6. </view>
7. </block>
8. </view>
9. </scroll-view>

wxss:

1. .scroll_view{
2. height:100vh;
3. }

js:

1. Page({
2.  
3. data: {
4. lists: [],
5. page: 1
6. },
7. //監聽是否滑到底部
8. nextPage: function () {
9. let new_lists = [];
10. let page = this.data.page;
11. let startindex = page * 10 + 1;
12. console.log("第" + page + "頁滑到底部了,請求第" + (page + 1) + "頁");
13. page += 1;
14. //模擬請求
15. for (let i = startindex; i <= startindex + 9; i++) {
16. new_lists.push(i);
17. }
18. this.setData({ lists: this.data.lists.concat(new_lists), page: page });
19. },
20. onLoad: function (options) {
21. let lists = [];
22. //模擬請求
23. for (let i = this.data.page; i <= this.data.page + 9; i++) {
24. lists.push(i)
25. }
26. this.setData({ lists: lists, });
27. },
28. })

效果:

說明

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

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