page-feed 信息流模板

从开发者工具 v2.25.1-rc 版本开始支持。

解释：信息流模板。包含下拉刷新、加载、多种信息流子项（纯文本、左文右图、大图、多图及视频模式）。

示例

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例

• SWAN

<smt-feed
    s-if="!showPageStatus"
    class="smt-feed pull-down-refresh"
    pull-to-refresh
    bind:refresh="onRefresh"
    bind:scrolltolower="scrollToLower"
    bind:scroll="scrollHandler"
    text="{{text}}"
>
    <smt-feed-item 
        s-for="item in list"
        theme="{{item.theme}}"
        content="{{item.content}}" 
        video="{{item.video}}"
        status="{{item.status}}"
        bindfeeditemtap="feedItemTap"
    >
    </smt-feed-item>
    <smt-spin s-if="loaded" status="{{status}}" bind:tap="reload"></smt-spin>
</smt-feed>
 <smt-page-status
    s-if="showPageStatus"
    class="content-loading"
    icon="{{loadingIcon}}"
    loading="{{loading}}"
    showBtn="{{loadingBtn}}"
    title="{{loadingTitle}}"
    loadingTitle="正在加载..."
    bind:smtreloading="reloadPage">
</smt-page-status>

npm 依赖

Bug & Tip

• Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。
• Tip：模板中内置了部分数据记录，你可以定义自己需要记录的数据。