Add server and mini-program pagination for shared lists

weapp/pages/timeline/timeline.js

@@ -1,3 +1,4 @@
+const { itemsOf, startList, applyList, failList, finishList, withListPagination } = require('../../utils/list-pagination');
 const { withDataCache } = require('../../utils/page-cache');
 const { getLayout } = require('../../utils/layout');
 // pages/timeline/timeline.js
@@ -56,7 +57,7 @@ function calcNearestRepeatDate(eventDate, today, interval, unit) {
   return new Date(eventDate);
 }
 
-Page(withDataCache({
+Page(withDataCache(withListPagination({
   onResize: function() { this.setData(getLayout()); },
   data: { loading: true, loadError: false,
     list: []
@@ -82,12 +83,11 @@ 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.timelineList();
+      const list = await api.timelineList({page:ticket.page,page_size:20});
       const myUid = wx.getStorageSync('userId');
       var nameMap = {};
       var avatarMap = {};
@@ -100,12 +100,12 @@ Page(withDataCache({
       } catch (e) {}
 
       var today = new Date(); today.setHours(0,0,0,0);
-      var items = (list || []).map(function(item, idx) {
+      var items = itemsOf(list).map(function(item, idx) {
         var cid = parseInt(item.created_by) || 0;
         item.creator_name = nameMap[cid] || (cid == myUid ? '我' : 'TA');
         item.creator_avatar = avatarMap[cid] || '';
         item.creator_initial = (item.creator_name || '?')[0].toUpperCase();
-        item.side = idx % 2 === 0 ? 'left' : 'right';
+        item.side = ((ticket.page-1)*20+idx) % 2 === 0 ? 'left' : 'right';
         item.bg_image_url = item.bg_image ? getImageUrl(item.bg_image) : '';
 
         // 计算纪念日/倒数日（支持重复事件）
@@ -150,13 +150,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: (e && (e.error || e.errMsg || e.message)) || '加载失败', icon: 'none' });
     }
-    finally { this._pageLoading = false; this.setData({loading:false}); }
+    finally { finishList(this,ticket); }
   },
 
 
@@ -192,4 +192,4 @@ Page(withDataCache({
   goHome: function() { wx.switchTab({ url: '/pages/index/index' }); },
   goBack: function() { wx.navigateBack(); },
   goProfile: function() { wx.switchTab({ url: '/pages/profile/profile' }); }
-}, {"loadData": ["timelineList", "coupleInfo"]}));
+}, 'loadData'), {"loadData": ["timelineList", "coupleInfo"]}));

weapp/pages/timeline/timeline.wxml

@@ -6,7 +6,7 @@
 <!-- 添加按钮 -->
 
 
-<scroll-view class="page-bg tl-scroll" scroll-y show-scrollbar="{{false}}" bounces="{{true}}">
+<scroll-view class="page-bg tl-scroll" scroll-y bindscrolltolower="loadMore" lower-threshold="120" show-scrollbar="{{false}}" bounces="{{true}}">
   <view class="container"><view class="j-row"><view><text class="j-eyebrow">MEMORIES OF US</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="tl-list" wx:if="{{!loading && !loadError && list.length > 0}}">
@@ -48,6 +48,7 @@
     </view>
   </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>