• page-content-detail 圖文詳情頁模板
  • 示例
    • 代碼示例
  • Bug & Tip

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

從開發(fā)者工具 v2.25.1-rc 版本開始支持。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),鄭州企業(yè)網(wǎng)站建設(shè),鄭州品牌網(wǎng)站建設(shè),網(wǎng)站定制,鄭州網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,鄭州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

解釋：圖文詳情頁模板?？梢约虞d含有圖片、文本、引用、標(biāo)題等形式的內(nèi)容。同時，圖文詳情頁模板內(nèi)置了回到頂端按鈕與關(guān)注 / 取消關(guān)注按鈕，支持點擊作者跳轉(zhuǎn)與圖片查看器。圖文詳情頁通常用來展示文章、帖子等內(nèi)容的詳情。

示例

掃碼體驗

代碼示例

請使用百度APP掃碼

代碼示例

• SWAN

 
 
 

  
  
  
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 {{title}}
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 {{author}}
  
  
  
 {{date}}
  
  
  
 
  
  
  
 
  
  
  
 {{btnLoading ? '' : (isFollow ? '已關(guān)注' : '關(guān)注')}}
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 {{item.content}}
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 
 

設(shè)計指南

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

• 獲取內(nèi)容詳情所需要的數(shù)據(jù)，請修改為相關(guān)的請求地址參數(shù)

• JS

 
 
 

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

• 點擊用戶事件處理，通常是跳轉(zhuǎn)到用戶詳情頁

• JS

 
 
 

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

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

• JS

 
 
 

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

Bug & Tip

• Tip：模板中使用的是測試數(shù)據(jù)，你需要從接口中獲取真實的數(shù)據(jù)。
• Tip：模板中內(nèi)置了部分數(shù)據(jù)記錄，你可以定義自己需要記錄的數(shù)據(jù)。

分享文章：創(chuàng)新互聯(lián)百度小程序教程：page-content-detail圖文詳情頁模板
當(dāng)前路徑：http://m.5511xx.com/article/djohiec.html