feed 信息流

解释：信息流组件，可配置下拉刷新、列表加载、上滑加载功能，适用于列表信息展示，并可放置在页面的任何部分；组件包含手势下拉以及 API 调用两种使用方式。在信息流列表页中，可根据不同场景配置刷新形式：下拉刷新适用于在页面中浏览过程中有内容更新时，手动触发；自动刷新适用于返回页面后有内容更新时，自动触发。也可在局部模块配置刷新能力。详情查看刷新和加载。

属性说明

属性名类型必填默认值说明

theme

String

否

主题配置，默认浅色；深色主题请指定 dark

loadingHeight

Number

否

64

加载、话术区域高度，会根据屏幕宽度适配，适配基于组件内方法import {upx2dpx} from’@smt-ui/component/src/common/utils/px’;（单位：px）

pullToRefresh

Boolean

否

false

是否开启手势下拉刷新；默认只能通过组件 API 调起

lowerThreshold

Number

否

150

触发 scrolltolower 事件的阈值（单位：px）

text

String

否

建议最多显示 18 个汉字，超出内容截断

加载成功时的展示话术

refresh

EventHandle

否

手势滑动触发加载时，响应该 onRefresh 事件；通过调用 API 加载，不会触发该事件

startRefresh

EventHandle

否

手动调用该 API ，触发加载

stopRefresh

EventHandle

否

手动调用该 API ，停止加载，并弹出加载提示（对应属性 text）；可使用 await 等待关闭动画结束

closeLoading

EventHandle

否

手动调用该 API ，立即关闭加载，不弹出加载提示；例如接口异常，建义直接关闭加载（小球交替一次大约为 500ms ，调用前可加延时避免关闭太快）

smt-feed-container

externalClass

否

组件整体 class 名

smt-feed-loading

externalClass

否

加载区域 class 名

smt-feed-content

externalClass

false

滚动区域 class 名，用于设置 ios 回弹背景

smt-refresh-circle-left

externalClass

否

加载中左侧小球 class 名

smt-refresh-circle-right

externalClass

否

加载中右侧小球 class 名

ext-cls-content

externalClass

否

滚动区域 class 名

smt-refresh-result-container

externalClass

否

加载话术外框 class 名

ext-cls-result-text

externalClass

否

加载话术文字 class 名

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

代码示例 1：下拉刷新

  • SWAN
  • JS
  • CSS
  • JSON
  1. <smt-feed
  2.     class="smt-feed pull-down-refresh"
  3.     pull-to-refresh
  4.     bind:refresh="onRefresh"
  5.     bind:scrolltolower="scrollToLower"
  6.     text="{{PullText}}"
  7. >
  8.     <view class="list">
  9.         <view class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
  10.             s-for="val in list"
  11.             style="border-bottom: solid 1px #e0e0e0;"
  12.             key="{{val}}"
  13.         >
  14.             <view class="left">
  15.                 <view class="row begin"></view>
  16.                 <view class="row center"></view>
  17.                 <view class="row end"></view>
  18.             </view>
  19.             <view class="right"></view>
  20.         </view>
  21.     </view>
  22.     <smt-spin status="{{status}}" bind:tap="reload"></smt-spin>
  23. </smt-feed>

代码示例 2：自动刷新

  • SWAN
  • JS
  • CSS
  • JSON
  1. <smt-feed
  2.     class="smt-feed auto-refresh"
  3.     text="{{text}}"
  4. >
  5.     <view class="list">
  6.         <view class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
  7.             s-for="val in list"
  8.             style="border-bottom: solid 1px #e0e0e0;"
  9.             key="{{val}}"
  10.         >
  11.             <view class="left">
  12.                 <view class="row begin"></view>
  13.                 <view class="row center"></view>
  14.                 <view class="row end"></view>
  15.             </view>
  16.             <view class="right"></view>
  17.         </view>
  18.     </view>
  19.     <smt-spin
  20.         status="{{status}}"
  21.         bind:tap="clickToLoad"
  22.     >
  23.     </smt-spin>
  24. </smt-feed>

代码示例 3：局部刷新

  • SWAN
  • JS
  • CSS
  • JSON
  1. <view class="placeholder"></view>
  2. <smt-feed
  3.     class="smt-feed pull-down-refresh"
  4.     pull-to-refresh
  5.     bind:refresh="onRefresh"
  6.     bind:scrolltolower="scrollToLower"
  7.     text="{{text}}"
  8. >
  9.     <view class="list">
  10.         <view class="{{'list-item ' + (val === 1 ? 'first' : '')}}"
  11.             s-for="val in list"
  12.             style="border-bottom: solid 1px #e0e0e0;"
  13.             key="{{val}}"
  14.         >
  15.             <view class="left">
  16.                 <view class="row begin"></view>
  17.                 <view class="row center"></view>
  18.                 <view class="row end"></view>
  19.             </view>
  20.             <view class="right"></view>
  21.         </view>
  22.     </view>
  23.     <smt-spin status="{{status}}" bind:tap="reload"></smt-spin>
  24. </smt-feed>

Bug & Tip

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