×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：feed信息流

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：下拉刷新

 
 
 
    
  
  
  
    2.   
  
  
  2.  class="smt-feed pull-down-refresh"
    3.   
  
  
  3.  pull-to-refresh
    4.   
  
  
  4.  bind:refresh="onRefresh"
    5.   
  
  
  5.  bind:scrolltolower="scrollToLower"
    6.   
  
  
  6.  text="{{PullText}}"
    7.   
  
  
  7. >
    8.   
  
  
  8.  
    9.   
  
  
  9.  
    10.   
  
  
  10.  s-for="val in list"
    11.   
  
  
  11.  style="border-bottom: solid 1px #e0e0e0;"
    12.   
  
  
  12.  key="{{val}}"
    13.   
  
  
  13.  >
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
  20.  
    21.   
  
  
  21.  
    22.   
  
  
  22.  
    23.   
  
  
    24.

代码示例 2：自动刷新

  • SWAN
  • JS
  • CSS
  • JSON
 
 
 
    
  
  
  
    2.   
  
  
  2.  class="smt-feed auto-refresh"
    3.   
  
  
  3.  text="{{text}}"
    4.   
  
  
  4. >
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  s-for="val in list"
    8.   
  
  
  8.  style="border-bottom: solid 1px #e0e0e0;"
    9.   
  
  
  9.  key="{{val}}"
    10.   
  
  
  10.  >
    11.   
  
  
  11.  
    12.   
  
  
  12.  
    13.   
  
  
  13.  
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
  20.  status="{{status}}"
    21.   
  
  
  21.  bind:tap="clickToLoad"
    22.   
  
  
  22.  >
    23.   
  
  
  23.  
    24.   
  
  
    25.

代码示例 3：局部刷新

  • SWAN
  • JS
  • CSS
  • JSON
 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
  3.  class="smt-feed pull-down-refresh"
    4.   
  
  
  4.  pull-to-refresh
    5.   
  
  
  5.  bind:refresh="onRefresh"
    6.   
  
  
  6.  bind:scrolltolower="scrollToLower"
    7.   
  
  
  7.  text="{{text}}"
    8.   
  
  
  8. >
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.   
  
  
  11.  s-for="val in list"
    12.   
  
  
  12.  style="border-bottom: solid 1px #e0e0e0;"
    13.   
  
  
  13.  key="{{val}}"
    14.   
  
  
  14.  >
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
  20.  
    21.   
  
  
  21.  
    22.   
  
  
  22.  
    23.   
  
  
  23.  
    24.   
  
  
    25.

Bug & Tip

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

文章标题：创新互联百度小程序教程：feed信息流
标题网址：http://cdbrznjsb.com/article/cdggdhh.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务