百度智能小程序 圖文詳情頁模板

page-content-detail 圖文詳情頁模板

解釋：圖文詳情頁模板。你可以加載含有圖片、文本、引用、標題等形式的內容。同時，圖文詳情頁模板內置了回到頂端按鈕與關注/取消關注按鈕，支持點擊作者跳轉與圖片查看器。圖文詳情頁通常用來展示文章、帖子等內容的詳情。

示例

使用方式

方式一 【 NPM 】

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

   npm i @smt-ui-template/page-content-detail
   

2. 將 /node_modules/@smt-ui-template/@smt-ui-template-content-detail 下的 @smt-ui-template-content-detail 文件夾拷貝到當前小程序合適的目錄下 （如 pages ）:

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

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

   {
       "pages": [
           ...
           "pages/@smt-ui-template-content-detail/index/index",
           ...
       ]
   }
   

4. 為了方便在開發(fā)者工具中查看模板頁的效果，可以設置模板頁為小程序預覽的首頁。該功能的說明請參考自定義編譯文檔。
   

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

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

   代碼示例

   <view class="wrap">
       <view s-if="!showPageStatus" class="content-header" ></view>
       <scroll-view scroll-y scroll-top="{=scrollTop=}" s-if="!showPageStatus" class="content-container {{isPhoneX ? 'content-container-ipx' : ''}}" bindscroll="onPageScroll" bindtouchmove="scrollPage" bindtouchstart="touchstart">
           <view class="content-title">
               <text selectable>{{title}}</text>
           </view>
           <view class="content-desp">
               <view class="author-detail" bindtap="tapuser" data-user-id="{{authorId}}">
                   <image class="author-avator" mode="widthFix" src="{{avator}}"></image>
                   <view class="author-other">
                       <view class="author-name">{{author}}</view>
                       <view class="publish-date">{{date}}</view>
                   </view>
               </view>
               <button s-if="showFollowBtn" class="follow-btn" size="mini" type="{{isFollow ? 'default' : 'primary'}}" bindtap="tapfollow" loading="{{btnLoading}}">{{btnLoading ? '' : (isFollow ? '已關注' : '關注')}}</button>
           </view>
           <view class="content-detail">
               <view s-for="item in content" class="detail-{{item.type}}">
                   <quote s-if="item.type == 'quote'" content="{{item.content}}"></quote>
                   <text selectable s-if="item.type == 'p' || item.type == 'title'">{{item.content}}</text>
                   <image lazy-load s-if="item.type == 'img'" mode="widthFix" src="{{item.content}}"  data-src="{{item.content}}" bindtap="tapimg" bindlongpress="longtapimg"></image>
               </view>
           </view>
           <top class="top-view {{showTopBtn ? 'top-view-show' : 'top-view-hide'}}" bind:top="backToTop"></top>
       </scroll-view>
   </view>
   

   設計指南

   為保證信息流分發(fā)時落地頁瀏覽體驗的一致性，建議正文字號使用默認字號 57px，如需自定義正文字號，可在正負 3px 空間內浮動。

3. 獲取數據：獲取文章詳情、頁面跳轉、關注/取消關注。
   • 獲取內容詳情所需要的數據，請修改為相關的請求地址參數

             getArticleDetail(articleId, cb) {
             let params = {
                 url: '',
                 method: 'GET',
                 data: {
                     articleId
                 },
            ...     
     

   • 點擊用戶事件處理，通常是跳轉到用戶詳情頁

             swan.navigateTo({
                 url: `/user-detail/user-detail?userId=${userId}`
             });
     

   • 發(fā)送 關注/取消關注 請求，請修改為相關的請求地址參數

             tapfollow(e) {
                 ...
                 let params = {
                     url: '',
                     method: 'POST',
                     data: {
                         authorId: this.data.authorId
                     },
                 ...
             }
     

Bug & Tip

• Tip：模板中使用的是測試數據，你需要從接口中獲取真實的數據。
• Tip：模板中內置了部分數據記錄，你可以定義自己需要記錄的數據。
• Tip: 頁面模板功能從開發(fā)者工具 v2.25.1-rc 版本開始支持