建站
咨詢
售后
建站咨詢
新聞中心
- feed 信息流
- 屬性說明
- 示例
- 代碼示例 1：下拉刷新
- 代碼示例 2：自動(dòng)刷新
- 代碼示例 3：局部刷新
- Bug & Tip
feed 信息流
解釋：信息流組件，可配置下拉刷新、列表加載、上滑加載功能，適用于列表信息展示，并可放置在頁面的任何部分；組件包含手勢(shì)下拉以及 API 調(diào)用兩種使用方式。在信息流列表頁中，可根據(jù)不同場(chǎng)景配置刷新形式：下拉刷新適用于在頁面中瀏覽過程中有內(nèi)容更新時(shí)，手動(dòng)觸發(fā)；自動(dòng)刷新適用于返回頁面后有內(nèi)容更新時(shí)，自動(dòng)觸發(fā)。也可在局部模塊配置刷新能力。詳情查看刷新和加載。
屬性說明
| 屬性名 | 類型 | 必填 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
|
theme |
String |
否 |
主題配置，默認(rèn)淺色；深色主題請(qǐng)指定 dark |
|
|
loadingHeight |
Number |
否 |
64 |
加載、話術(shù)區(qū)域高度，會(huì)根據(jù)屏幕寬度適配，適配基于組件內(nèi)方法 |
|
pullToRefresh |
Boolean |
否 |
false |
是否開啟手勢(shì)下拉刷新；默認(rèn)只能通過組件 API 調(diào)起 |
|
lowerThreshold |
Number |
否 |
150 |
觸發(fā) scrolltolower 事件的閾值（單位：px） |
|
text |
String |
否 |
建議最多顯示 18 個(gè)漢字，超出內(nèi)容截?cái)?/p> |
加載成功時(shí)的展示話術(shù) |
|
refresh |
EventHandle |
否 |
手勢(shì)滑動(dòng)觸發(fā)加載時(shí)，響應(yīng)該 onRefresh 事件；通過調(diào)用 API 加載，不會(huì)觸發(fā)該事件 |
|
|
startRefresh |
EventHandle |
否 |
手動(dòng)調(diào)用該 API ，觸發(fā)加載 |
|
|
stopRefresh |
EventHandle |
否 |
手動(dòng)調(diào)用該 API ，停止加載，并彈出加載提示（對(duì)應(yīng)屬性 text）；可使用 await 等待關(guān)閉動(dòng)畫結(jié)束 |
|
|
closeLoading |
EventHandle |
否 |
手動(dòng)調(diào)用該 API ，立即關(guān)閉加載，不彈出加載提示；例如接口異常，建義直接關(guān)閉加載（小球交替一次大約為 500ms ，調(diào)用前可加延時(shí)避免關(guān)閉太快） |
|
|
smt-feed-container |
externalClass |
否 |
組件整體 class 名 |
|
|
smt-feed-loading |
externalClass |
否 |
加載區(qū)域 class 名 |
|
|
smt-feed-content |
externalClass |
false |
滾動(dòng)區(qū)域 class 名，用于設(shè)置 ios 回彈背景 |
|
|
smt-refresh-circle-left |
externalClass |
否 |
加載中左側(cè)小球 class 名 |
|
|
smt-refresh-circle-right |
externalClass |
否 |
加載中右側(cè)小球 class 名 |
|
|
ext-cls-content |
externalClass |
否 |
滾動(dòng)區(qū)域 class 名 |
|
|
smt-refresh-result-container |
externalClass |
否 |
加載話術(shù)外框 class 名 |
|
|
ext-cls-result-text |
externalClass |
否 |
加載話術(shù)文字 class 名 |
示例
跳轉(zhuǎn)編輯工具
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗(yàn)
代碼示例
請(qǐng)使用百度APP掃碼
代碼示例 1：下拉刷新
- SWAN
- JS
- CSS
- JSON
class="smt-feed pull-down-refresh"pull-to-refreshbind:refresh="onRefresh"bind:scrolltolower="scrollToLower"text="{{PullText}}">s-for="val in list"style="border-bottom: solid 1px #e0e0e0;"key="{{val}}">
代碼示例 2：自動(dòng)刷新
- SWAN
- JS
- CSS
- JSON
class="smt-feed auto-refresh"text="{{text}}">s-for="val in list"style="border-bottom: solid 1px #e0e0e0;"key="{{val}}">status="{{status}}"bind:tap="clickToLoad">
代碼示例 3：局部刷新
- SWAN
- JS
- CSS
- JSON
class="smt-feed pull-down-refresh"pull-to-refreshbind:refresh="onRefresh"bind:scrolltolower="scrollToLower"text="{{text}}">s-for="val in list"style="border-bottom: solid 1px #e0e0e0;"key="{{val}}">
Bug & Tip
- Tip：和 scroll-view 一樣，信息流組件作為局部滾動(dòng)組件，必須在它的父級(jí)或本身指定高度。
- Tip：當(dāng)同時(shí)啟用下拉刷新和上滑加載且請(qǐng)求不穩(wěn)定時(shí)，可使用 CancelToken 取消先前的請(qǐng)求。
文章題目：創(chuàng)新互聯(lián)百度小程序教程：feed信息流
分享鏈接：http://www.fisionsoft.com.cn/article/cdggdhh.html
