• page-feed 信息流模板
  • 示例
    • 图片示例
    • 代码示例
  • npm 依赖
  • Bug & Tip

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：模板中内置了部分数据记录，你可以定义自己需要记录的数据。