百度智能小程序 信息流模板

page-feed 信息流模板

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

示例

图片示例

使用方式

方式一 【 NPM 】

1. 在小程序根目录执行下方命令，下载页面模板的 npm 包：

   npm i @smt-ui-template/page-feed
   

2. 将 /node_modules/@smt-ui-template/page-feed 下的 @smt-ui-template-feed 文件夹拷贝到当前小程序合适的目录下 （如 pages ）:

   .
   ├── project.swan.json                   
   ├── app.json                            
   ├── app.js                              
   ├── pages
       └── @smt-ui-template-feed     // 模板文件
   

3. 在小程序根目录的 app.json 中配置模板页面的 path 路径，查看效果，如：

   {
       "pages": [
           ...
           "pages/@smt-ui-template-feed/index/index"
           ...
       ]
   }
   

4. 为了方便在开发者工具中查看模板页的效果，可以设置模板页为小程序预览的首页。该功能的说明请参考自定义编译文档 。
   

方式二 【 开发者工具-页面模板 】

1. 打开开发者工具，点击 ”页面模板“，在下方找到 ”信息流模板“，选中该模板后点击右下角 ”立即使用”，填写相关信息点击右下角 ”完成“ 按钮。
2. 使用开发者工具的编辑器或者选择自己熟悉的编辑器对模板进行二次开发。

   代码示例

   <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>
   

Bug & Tip

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