信息流模板

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

示例

扫码体验

信息流模板 - 图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 版本开始支持