信息流模板

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

示例

扫码体验

信息流模板 - 图1

图片示例

信息流模板 - 图2

使用方法

  • 在小程序根目录下执行如下命令行，引入页面模板。
  1. npm i @smt-ui-template/page-feed
  • 进入page-feed文件夹，安装所有模板依赖
  1. npm i

代码示例

  1. <smt-feed
  2.     s-if="!showPageStatus"
  3.     class="smt-feed pull-down-refresh"
  4.     pull-to-refresh
  5.     bind:refresh="onRefresh"
  6.     bind:scrolltolower="scrollToLower"
  7.     bind:scroll="scrollHandler"
  8.     text="{{text}}"
  9. >
  10.     <smt-feed-item 
  11.         s-for="item in list"
  12.         theme="{{item.theme}}"
  13.         content="{{item.content}}" 
  14.         video="{{item.video}}"
  15.         status="{{item.status}}"
  16.         bindfeeditemtap="feedItemTap"
  17.     >
  18.     </smt-feed-item>
  19.     <smt-spin s-if="loaded" status="{{status}}" bind:tap="reload"></smt-spin>
  20. </smt-feed>
  21.  <smt-page-status
  22.     s-if="showPageStatus"
  23.     class="content-loading"
  24.     icon="{{loadingIcon}}"
  25.     loading="{{loading}}"
  26.     showBtn="{{loadingBtn}}"
  27.     title="{{loadingTitle}}"
  28.     loadingTitle="正在加载..."
  29.     bind:smtreloading="reloadPage">
  30. </smt-page-status>

Bug & Tip

  • Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。
  • Tip：模板中内置了部分数据记录，你可以定义自己需要记录的数据。
  • Tip: 页面模板功能从开发者工具 v2.25.1-rc 版本开始支持