189 8069 5689

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

  • feed 信息流
    • 属性说明
    • 示例
      • 代码示例 1：下拉刷新
      • 代码示例 2：自动刷新
      • 代码示例 3：局部刷新
    • Bug & Tip

    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
     
 
 
      
  
  
  
      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://www.cdxtjz.cn/article/cdggdhh.html

    其他资讯

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们， 我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
    • 电话：028- 86922220 18980695689
    • 商务合作邮箱：631063699@qq.com
    • 合作QQ： 532337155
    • 成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！

    小谭观点

    相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
    友情链接： 犀浦门窗定制   蓬安网站建设公司   成都橡塑保温管   宣传单包装设计   四川发电机租赁   名片设计   眉山发电机租赁   led发光广告字   联通机柜租用   成都珀金斯发电机   
    © Copyright 2023 小谭建站工作室All Rights Reserved.  成都网站建设 / 成都网站建设 / 响应式网站建设 / 成都服务器租用