日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：feed信息流
  • feed 信息流
    • 屬性說明
    • 示例
      • 代碼示例 1：下拉刷新
      • 代碼示例 2：自動刷新
      • 代碼示例 3：局部刷新
    • Bug & Tip

    feed 信息流

    解釋：信息流組件，可配置下拉刷新、列表加載、上滑加載功能，適用于列表信息展示，并可放置在頁面的任何部分；組件包含手勢下拉以及 API 調用兩種使用方式。在信息流列表頁中，可根據(jù)不同場景配置刷新形式：下拉刷新適用于在頁面中瀏覽過程中有內容更新時，手動觸發(fā)；自動刷新適用于返回頁面后有內容更新時，自動觸發(fā)。也可在局部模塊配置刷新能力。詳情查看刷新和加載。

    屬性說明

    屬性名 類型 必填 默認值 說明

    theme

    String

    否

    主題配置，默認淺色；深色主題請指定 dark

    loadingHeight

    Number

    否

    64

    加載、話術區(qū)域高度，會根據(jù)屏幕寬度適配，適配基于組件內方法import {upx2dpx} from’@smt-ui/component/src/common/utils/px’;（單位：px）

    pullToRefresh

    Boolean

    否

    false

    是否開啟手勢下拉刷新；默認只能通過組件 API 調起

    lowerThreshold

    Number

    否

    150

    觸發(fā) scrolltolower 事件的閾值（單位：px）

    text

    String

    否

    建議最多顯示 18 個漢字，超出內容截斷

    加載成功時的展示話術

    refresh

    EventHandle

    否

    手勢滑動觸發(fā)加載時，響應該 onRefresh 事件；通過調用 API 加載，不會觸發(fā)該事件

    startRefresh

    EventHandle

    否

    手動調用該 API ，觸發(fā)加載

    stopRefresh

    EventHandle

    否

    手動調用該 API ，停止加載，并彈出加載提示（對應屬性 text）；可使用 await 等待關閉動畫結束

    closeLoading

    EventHandle

    否

    手動調用該 API ，立即關閉加載，不彈出加載提示；例如接口異常，建義直接關閉加載（小球交替一次大約為 500ms ，調用前可加延時避免關閉太快）

    smt-feed-container

    externalClass

    否

    組件整體 class 名

    smt-feed-loading

    externalClass

    否

    加載區(qū)域 class 名

    smt-feed-content

    externalClass

    false

    滾動區(qū)域 class 名，用于設置 ios 回彈背景

    smt-refresh-circle-left

    externalClass

    否

    加載中左側小球 class 名

    smt-refresh-circle-right

    externalClass

    否

    加載中右側小球 class 名

    ext-cls-content

    externalClass

    否

    滾動區(qū)域 class 名

    smt-refresh-result-container

    externalClass

    否

    加載話術外框 class 名

    ext-cls-result-text

    externalClass

    否

    加載話術文字 class 名

    示例

    跳轉編輯工具

    在開發(fā)者工具中打開

    在 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：當同時啟用下拉刷新和上滑加載且請求不穩(wěn)定時，可使用 CancelToken 取消先前的請求。

    分享標題：創(chuàng)新互聯(lián)百度小程序教程：feed信息流
    路徑分享：http://www.5511xx.com/article/cdggdhh.html