百度智能小程序 圖文詳情頁(yè)模板

2020-09-03 16:30 更新

page-content-detail 圖文詳情頁(yè)模板

解釋:圖文詳情頁(yè)模板。你可以加載含有圖片、文本、引用、標(biāo)題等形式的內(nèi)容。同時(shí),圖文詳情頁(yè)模板內(nèi)置了回到頂端按鈕與關(guān)注/取消關(guān)注按鈕,支持點(diǎn)擊作者跳轉(zhuǎn)與圖片查看器。圖文詳情頁(yè)通常用來(lái)展示文章、帖子等內(nèi)容的詳情。

示例


使用方式

方式一 【 NPM 】

  1. 在小程序根目錄執(zhí)行下方命令,下載頁(yè)面模板的 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 文件夾拷貝到當(dāng)前小程序合適的目錄下 (如 pages ):
    .
    ├── project.swan.json                   
    ├── app.json                            
    ├── app.js                              
    ├── pages
        └── @smt-ui-template-content-detail    // 模板文件
    
  3. 在小程序根目錄的 app.json 中配置模板頁(yè)面的 path 路徑,查看效果,如:
    {
        "pages": [
            ...
            "pages/@smt-ui-template-content-detail/index/index",
            ...
        ]
    }
    
  4. 為了方便在開發(fā)者工具中查看模板頁(yè)的效果,可以設(shè)置模板頁(yè)為小程序預(yù)覽的首頁(yè)。該功能的說(shuō)明請(qǐng)參考自定義編譯文檔。

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

  1. 打開開發(fā)者工具,點(diǎn)擊 ”頁(yè)面模板“,在下方找到 ”圖文詳情頁(yè)模板“,選中該模板后點(diǎn)擊右下角 ”立即使用”,填寫相關(guān)信息點(diǎn)擊右下角 ”完成“ 按鈕。
  2. 使用開發(fā)者工具的編輯器或者選擇自己熟悉的編輯器對(duì)模板進(jìn)行二次開發(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 ? '已關(guān)注' : '關(guān)注')}}</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>
    

    設(shè)計(jì)指南

    為保證信息流分發(fā)時(shí)落地頁(yè)瀏覽體驗(yàn)的一致性,建議正文字號(hào)使用默認(rèn)字號(hào) 57px,如需自定義正文字號(hào),可在正負(fù) 3px 空間內(nèi)浮動(dòng)。

  3. 獲取數(shù)據(jù):獲取文章詳情、頁(yè)面跳轉(zhuǎn)、關(guān)注/取消關(guān)注。
    • 獲取內(nèi)容詳情所需要的數(shù)據(jù),請(qǐng)修改為相關(guān)的請(qǐng)求地址參數(shù)
              getArticleDetail(articleId, cb) {
              let params = {
                  url: '',
                  method: 'GET',
                  data: {
                      articleId
                  },
             ...     
      
    • 點(diǎn)擊用戶事件處理,通常是跳轉(zhuǎn)到用戶詳情頁(yè)
              swan.navigateTo({
                  url: `/user-detail/user-detail?userId=${userId}`
              });
      
    • 發(fā)送 關(guān)注/取消關(guān)注 請(qǐng)求,請(qǐng)修改為相關(guān)的請(qǐng)求地址參數(shù)
              tapfollow(e) {
                  ...
                  let params = {
                      url: '',
                      method: 'POST',
                      data: {
                          authorId: this.data.authorId
                      },
                  ...
              }
      

Bug & Tip

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


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)