page-content-detail 图文详情页模板

从开发者工具 v2.25.1-rc 版本开始支持。
创新互联建站是一家集网站建设,郑州企业网站建设,郑州品牌网站建设,网站定制,郑州网站建设报价,网络营销,网络优化,郑州网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

解释：图文详情页模板。可以加载含有图片、文本、引用、标题等形式的内容。同时，图文详情页模板内置了回到顶端按钮与关注 / 取消关注按钮，支持点击作者跳转与图片查看器。图文详情页通常用来展示文章、帖子等内容的详情。

示例

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN

 
 
 
  
  
    
  
     
  
     
  
     
  
   {{title}}  
  
     
  
     
  
     
  
     
  
     
  
   {{author}}  
  
   {{date}}  
  
     
  
     
  
     
  
     
  
     
  
     
  
     
  
   {{item.content}}

设计指南

为保证信息流分发时落地页浏览体验的一致性，建议正文字号使用默认字号 57px ，如需自定义正文字号，可在正负 3px 空间内浮动。

获取内容详情所需要的数据，请修改为相关的请求地址参数
JS

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

点击用户事件处理，通常是跳转到用户详情页
JS

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

发送“关注 / 取消关注”请求，请修改为相关的请求地址参数
JS

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

Bug & Tip

Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。
Tip：模板中内置了部分数据记录，你可以定义自己需要记录的数据。

名称栏目：创新互联百度小程序教程：page-content-detail图文详情页模板
分享路径：http://www.jxjierui.cn/article/djohiec.html

新闻中心

page-content-detail 图文详情页模板

示例

代码示例

Bug & Tip

其他资讯