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

page-feed 信息流模板

解釋：信息流模板：包含下拉刷新、加載、多種信息流子項（純文本、左文右圖、大圖、多圖及視頻模式）。

示例

圖片示例

使用方式

方式一 【 NPM 】

1. 在小程序根目錄執(zhí)行下方命令，下載頁面模板的 npm 包：

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

2. 將 /node_modules/@smt-ui-template/page-feed 下的 @smt-ui-template-feed 文件夾拷貝到當(dāng)前小程序合適的目錄下 （如 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. 為了方便在開發(fā)者工具中查看模板頁的效果，可以設(shè)置模板頁為小程序預(yù)覽的首頁。該功能的說明請參考自定義編譯文檔 。
   

方式二 【 開發(fā)者工具-頁面模板 】

1. 打開開發(fā)者工具，點擊 ”頁面模板“，在下方找到 ”信息流模板“，選中該模板后點擊右下角 ”立即使用”，填寫相關(guān)信息點擊右下角 ”完成“ 按鈕。
2. 使用開發(fā)者工具的編輯器或者選擇自己熟悉的編輯器對模板進行二次開發(fā)。

   代碼示例

   <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：模板中使用的是測試數(shù)據(jù)，你需要從接口中獲取真實的數(shù)據(jù)。
• Tip：模板中內(nèi)置了部分?jǐn)?shù)據(jù)記錄，你可以定義自己需要記錄的數(shù)據(jù)。
• Tip：頁面模板功能從開發(fā)者工具 v2.25.1-rc 版本開始支持。