Add server and mini-program pagination for shared lists

weapp/pages/lovewords/lovewords.js

@@ -1,8 +1,9 @@
+const { itemsOf, startList, applyList, failList, finishList, withListPagination } = require('../../utils/list-pagination');
 const { withDataCache } = require('../../utils/page-cache');
 const { getLayout } = require('../../utils/layout');
 // pages/lovewords/lovewords.js - 一起听过的歌
 const { api } = require('../../utils/request');
-Page(withDataCache({
+Page(withDataCache(withListPagination({
   onResize: function() { this.setData(getLayout()); },
   data: { loading: true, loadError: false,
     list: [],
@@ -30,13 +31,12 @@ Page(withDataCache({
     return { title: '让所有的爱有迹可循', imageUrl: '/images/share.png' };
   },
 
-  loadData: async function() {
-    if (this._pageLoading) return;
-    this._pageLoading = true;
-    this.setData({loading: !this._hasCachedData, loadError:false});
+  loadData: async function(page) {
+    const ticket = startList(this, page);
+    if (!ticket) return;
     try {
-      const list = await api.songsList();
-      const items = (list || []).map(function(item) {
+      const list = await api.songsList({page:ticket.page,page_size:20});
+      const items = itemsOf(list).map(function(item) {
         if (item.created_at) {
           var d = new Date(item.created_at);
           item.date_month = String(d.getMonth() + 1).padStart(2, '0');
@@ -44,13 +44,13 @@ Page(withDataCache({
         }
         return item;
       });
-      this.setData({ list: items });
+      applyList(this, ticket, list, items, 'list');
     } catch (e) {
-      this.setData({loadError:true});
+      failList(this,ticket);
       console.error(e);
       wx.showToast({ title: '加载失败', icon: 'none' });
     }
-    finally { this._pageLoading = false; this.setData({loading:false}); }
+    finally { finishList(this,ticket); }
   },
 
   noop: function() {},
@@ -124,4 +124,4 @@ Page(withDataCache({
   goBack: function() { wx.navigateBack(); },
   goHome: function() { wx.switchTab({ url: '/pages/index/index' }); },
   goProfile: function() { wx.switchTab({ url: '/pages/profile/profile' }); }
-}, {"loadData": ["songsList"]}));
+}, 'loadData'), {"loadData": ["songsList"]}));

weapp/pages/lovewords/lovewords.wxml

@@ -5,7 +5,7 @@
 
 
 
-<scroll-view class="page-bg" scroll-y show-scrollbar="{{false}}" bounces="{{true}}">
+<scroll-view class="page-bg" scroll-y bindscrolltolower="loadMore" lower-threshold="120" show-scrollbar="{{false}}" bounces="{{true}}">
   <view class="c-body"><view class="c-heading j-row"><view><text class="j-eyebrow">OUR SOUNDTRACK</text><text class="j-page-title">一起听过的旋律</text></view><button class="j-button j-button-small" bindtap="goToPublish">＋ 添加</button></view>
 <page-state wx:if="{{loading}}" kind="loading" title="正在加载" /><page-state wx:elif="{{loadError}}" kind="error" title="加载失败" description="请检查网络后重新加载" action="重试" bind:action="loadData" />
     <view class="song-list" wx:if="{{!loading && !loadError && list.length}}">
@@ -21,6 +21,7 @@
     </view>
     <page-state wx:if="{{!loading && !loadError && !list.length}}" title="收藏我们的第一首歌" description="让某一段旋律，成为两个人的记忆" action="添加歌曲" bind:action="goToPublish" />
   </view>
+<view class="j-pagination" wx:if="{{!loading && !loadError && total > 0}}"><text wx:if="{{loadingMore}}">正在加载…</text><text wx:elif="{{moreError}}" bindtap="loadMore">加载失败，点击重试</text><text wx:elif="{{hasMore}}" bindtap="loadMore">加载更多</text><text wx:else>已加载全部</text></view>
 </scroll-view>
 
   <!-- 添加弹窗 -->