Add server and mini-program pagination for shared lists

weapp/pages/albums/albums.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/albums/albums.js
 const { api, getImageUrl } = require('../../utils/request');
-Page(withDataCache({
+Page(withDataCache(withListPagination({
   onResize: function() { this.setData(getLayout()); },
   data: {
     loading: true, loadError: false,
@@ -47,21 +48,21 @@ Page(withDataCache({
 
   noop: function() {},
 
-  loadAlbums: async function() {
-    if (this._loading) return;
-    this._loading = true;
-    this.setData({ loading: !this._hasCachedData, loadError: false });
+  loadAlbums: async function(page) {
+    const ticket = startList(this, page);
+    if (!ticket) return;
     try {
-      var list = await api.albumList(null, 'GET', true);
-      list = (list || []).map(function(a) {
+      var list = await api.albumList({page:ticket.page,page_size:20});
+      var result = list;
+      list = itemsOf(list).map(function(a) {
         a.cover = getImageUrl(a.cover);
         a.photo_count = a.photo_count || 0;
         // 地理位置：优先显示地址名称，其次显示经纬度
         a.location_text = a.location || ((a.lat && a.lng) ? (a.lat + ', ' + a.lng) : '');
         return a;
       });
-      this.setData({ albums: list });
-    } catch(e) { console.error(e); this.setData({ loadError: true }); } finally { this._loading = false; this.setData({ loading: false }); }
+      applyList(this, ticket, result, list, 'albums');
+    } catch(e) { console.error(e); failList(this,ticket); } finally { finishList(this,ticket); }
   },
 
   openAlbum: function(e) {
@@ -174,4 +175,4 @@ Page(withDataCache({
   goHome: function() { wx.switchTab({ url: '/pages/index/index' }); },
   goBack: function() { wx.navigateBack(); },
   goToProfile: function() { wx.switchTab({ url: '/pages/profile/profile' }); }
-  }, {"loadAlbums": ["albumList"]}));
+  }, 'loadAlbums'), {"loadAlbums": ["albumList"]}));

weapp/pages/albums/albums.wxml

@@ -3,7 +3,7 @@
 <!-- pages/albums/albums.wxml - 相册列表 -->
 <app-nav title="{{uploadMode ? '选择相册' : '相册'}}" back="{{true}}" />
 
-<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="j-body"><view class="j-row"><view><text class="j-eyebrow">MOMENTS WE KEEP</text><text class="j-page-title">{{uploadMode ? '选择上传照片的相册' : '照片里的日常'}}</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="加载失败" action="重试" bind:action="loadAlbums" />
 <view class="j-album-list" wx:else><view class="j-album-print" wx:for="{{albums}}" wx:key="id" bindtap="openAlbum" data-id="{{item.id}}"><image wx:if="{{item.cover}}" src="{{item.cover}}" mode="aspectFill" /><view wx:else class="j-album-placeholder"><image src="/images/album.svg" /><text>还没有照片</text></view><view class="j-row"><view><text class="j-story-title">{{item.title || '我们的相册'}}</text><text class="j-caption">{{item.photo_count || 0}} 张照片</text></view><view class="j-link j-album-menu" catchtap="showMoreMenu" data-id="{{item.id}}" data-title="{{item.title}}" data-desc="{{item.description}}" data-cover="{{item.cover}}">•••</view></view><text wx:if="{{item.description}}" class="j-caption">{{item.description}}</text></view></view>
@@ -41,6 +41,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>