feat: List 组件新增 loadMore 属性,可在无限循环时展示加载更多 item

Author: linxz

components/list/index.axml

@@ -5,6 +5,8 @@
   <view class="am-list-body">
     <slot />
   </view>
+  <view class="am-list-load-more" a:if="{{loadMore === 'load'}}"><icon type="loading" size="16"/><text class="am-list-load-more-txt">{{loadContent[0]?loadContent[0]:''}}</text></view>
+  <view class="am-list-load-over" a:if="{{loadMore === 'over'}}">{{loadContent[1]?loadContent[1]:''}}</view>
   <view class="am-list-footer" a:if="{{$slots.footer}}">
     <slot name="footer" />
   </view>

components/list/index.less

@@ -16,4 +16,23 @@
   &-footer {
     padding: 8px 16px 16px 16px;
   }
+  &-load-more {
+    text-align: center;
+    background: #fff;
+    padding: 10px 16px;
+    font-size: 15px;
+    line-height: 1.4;
+    color: @color-text-title;
+    &-txt {
+      padding: 0 10px;
+    }
+  }
+  &-load-over {
+    display: block;
+    padding: 10px 16px;
+    font-size: 10px;
+    text-align: center;
+    color: #ccc;
+    text-shadow: 1px 1px #f0f0f0;
+  }
 }

components/list/index.md

@@ -11,6 +11,35 @@
 | 属性名 | 描述 | 类型 | 默认值 |
 | ---- | ---- | ---- | ---- |
 | className | 自定义class | String| |
+| loadMore | 显示加载更多 item。`load`：显示加载更多；`over`：显示加载完成无更多 | String| |
+| loadContent | 需结合 `loadMore` 属性使用，用于文案展示 | Array | ['加载更多...','-- 数据加载完了 --'] |
+
+### loadMore 使用介绍
+当需要使用无限循环列表时，可将 `list` 组件放置入到 [`scroll-view`](https://docs.alipay.com/mini/component/scroll-view) 中，根据需求对 [`scroll-view`](https://docs.alipay.com/mini/component/scroll-view) 添加相对应的属性，比如：
+```xml
+<scroll-view style="height: 80vh;" scroll-y onScrollToLower="onScrollToLower" enable-back-to-top="true">
+  <list loadMore="{{loadMore}}" loadContent="{{loadContent}}">
+    <list-item>...</list-item>
+  </list>
+</scroll-view>
+```
+```javascript
+Page({
+  data: {
+    loadMore: '',
+    loadContent: [
+      '马不停蹄加载更多数据中...',
+      '-- 已经到底了，加不了咯 --',
+    ],
+  },
+  onScrollToLower() {
+    // 根据实际数据加载情况设定 loadMore 的值即可，分别为 load 和 over
+    this.setData({
+      loadMore: 'load',
+    })
+  },
+})
+```
 
 ### slots
 

components/list/index.ts

@@ -1,5 +1,30 @@
 Component({
   props: {
     className: '',
+    loadMore: false,
+    loadContent: [
+      '',
+      '',
+    ],
+  },
+  data: {
+    loadContent: [
+      '加载更多...',
+      '-- 数据加载完了 --',
+    ],
+  },
+  didMount() {
+    const loadTxt = this.props.loadContent[0] ? this.props.loadContent[0] : this.data.loadContent[0];
+    const overTxt = this.props.loadContent[1] ? this.props.loadContent[1] : this.data.loadContent[1];
+    this.setData({
+      loadContent: [loadTxt, overTxt],
+    });
+  },
+  didUpdate() {
+    const loadTxt = this.props.loadContent[0] ? this.props.loadContent[0] : this.data.loadContent[0];
+    const overTxt = this.props.loadContent[1] ? this.props.loadContent[1] : this.data.loadContent[1];
+    this.setData({
+      loadContent: [loadTxt, overTxt],
+    });
   },
 });

examples/pages/list/index.acss

@@ -15,4 +15,5 @@
 .am-list-sticky {
   position: sticky;
   top: 0;
+  z-index: 2;
 }

examples/pages/list/index.axml

@@ -1,5 +1,5 @@
 <view>
-	<scroll-view style="height: 80vh;" scroll-y onScrollToLower="onScrollToLower">
+	<scroll-view style="height: 80vh;" scroll-y onScrollToLower="onScrollToLower" enable-back-to-top="true">
 		<list>
 			<view slot="header">
 				列表头部
@@ -143,7 +143,7 @@
 				</list-item>
 			</block>
 		</list>
-		<list >
+		<list loadMore="{{loadMore}}" loadContent="{{loadContent}}">
 			<view slot="header">
 				无限滚动列表
 			</view>
@@ -166,9 +166,6 @@
 					</view>
 				</list-item>
 			</block>
-			<view slot="footer">
-				列表尾部
-			</view>
 		</list>
 	</scroll-view>
 </view>

examples/pages/list/index.js

@@ -228,17 +228,36 @@ Page({
         align: 'middle',
       },
     ],
+    loadMore: '',
+    loadContent: [
+      '马不停蹄加载更多数据中...',
+      '-- 已经到底了，加不了咯 --',
+    ],
+    maxList: 5,
   },
   onItemClick(ev) {
     my.alert({
       content: `点击了第${ev.index}行`,
     });
   },
   onScrollToLower() {
-    const { items5 } = this.data;
-    const newItems = items5.concat(newitems);
     this.setData({
-      items5: newItems,
+      loadMore: 'load',
     });
+    const { items5 } = this.data;
+    // 加入 maxList 用于判断“假设”数据加载完毕后的情况
+    if (this.data.maxList > 0) {
+      const newItems = items5.concat(newitems);
+      const MAXList = this.data.maxList - 1;
+      this.setData({
+        items5: newItems,
+        maxList: MAXList,
+      });
+    } else {
+      // 数据加载完毕之后，改变 loadMore 为 over 即可
+      this.setData({
+        loadMore: 'over',
+      });
+    }
   },
 });