feed 信息流

解释： 信息流组件，可配置下拉刷新、列表加载、上滑加载功能，适用于列表信息展示，并可放置在页面的任何部分；组件包含手势下拉以及api调用两种使用方式

属性说明

属性名类型必填默认值说明
themeString否-主题配置，默认浅色；深色主题请指定dark
loadingHeightNumber否192px(设计稿宽度为1242)加载、话术区域高度，单位为设备px，转换方法: import {upx2dpx} from '@smt-ui/component/src/common/utils/px';
pullToRefreshBoolean否false是否开启手势下拉刷新; 默认只能通过组件api调起
lowerThresholdNumber否150px（设备上的px）触发scrolltolower事件的阈值
textString否建议最多显示18个汉字，超出内容截断加载成功时的展示话术
refreshEventHandle否手势滑动触发加载时，响应该onRefresh事件; 通过调用api加载，不会触发该事件
startRefreshEventHandle否手动调用该api，触发加载
stopRefreshEventHandle否手动调用该api，停止加载，并弹出加载提示（对应属性text）；可使用await等待关闭动画结束
closeLoadingEventHandle否手动调用该api，立即关闭加载，不弹出加载提示；例如接口异常，建义直接关闭加载（小球交替一次大约为500ms，调用前可加延时避免关闭太快）
smt-feed-containerexternalClass否-组件整体class名
smt-feed-loadingexternalClass否-加载区域class名
smt-feed-contentexternalClassfalse滚动区域class名，用于设置ios回弹背景
smt-refresh-circle-leftexternalClass否-加载中左侧小球class名
smt-refresh-circle-rightexternalClass否-加载中右侧小球class名
ext-cls-contentexternalClass否-滚动区域class名
smt-refresh-result-containerexternalClass否-加载话术外框class名
ext-cls-result-textexternalClass否-加载话术文字class名

示例

在开发者工具中预览效果

扫码体验

feed 信息流 - 图1

图片示例

feed 信息流 - 图2

代码示例

  1. <!-- 手势下拉刷新 & 触底加载 -->
  2. <smt-feed
  3.     class="smt-feed pull-down-refresh"
  4.     pull-to-refresh
  5.     bind:refresh="onRefresh"
  6.     bind:scrolltolower="scrollToLower"
  7.     text="{{PullText}}"
  8. >
  9.     <list list="{{list}}"></list>
  10.     <smt-spin status="{{status}}" bind:tap="reload"></smt-spin>
  11. </smt-feed>
  1. async onRefresh() {
  2.     const refresh = await selComponent(this, '.pull-down-refresh');
  3.     const {data: list} = await fetchData();
  4.     await syncSetData(this, {
  5.         status: 1,
  6.         count: 0,
  7.         list: list || this.data.list,
  8.         text: list ? `为你推荐${list.length}条更新` : '暂时没有更新，休息一下'
  9.     });
  10.     refresh.stopRefresh();
  11. },
  13. async scrollToLower() {
  14.     const {data: list} = await fetchData();
  15.     const fail = this.data.count === 3;
  16.     const end = this.data.count === 5;
  17.     if (fail || end) {
  18.         this.setData({
  19.             status: fail ? 3 : 2
  20.         });
  21.         return;
  22.     }
  23.     await syncSetData(this, {
  24.         list: list.concat(this.data.list || []),
  25.         count: ++this.data.count
  26.     });
  27. }
  1. .smt-feed {
  2.     display: block;
  3.     height: calc(100vh - 40px);
  4. }

Bug&Tip

  • Tip：和scroll-view一样，信息流组件作为局部滚动组件，必须在它的父级或本身指定高度。
  • Tip：当同时启用下拉刷新和上滑加载且请求不稳定时，可使用CancelToken取消先前的请求。