page-content-detail 图文详情页模板
- 示例
  - 代码示例
- Bug & Tip

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

从开发者工具 v2.25.1-rc 版本开始支持。

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

示例

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN

 
 
 
  
  
  <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>

设计指南

为保证信息流分发时落地页浏览体验的一致性，建议正文字号使用默认字号 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
  
  
   },
  
  
   ...
  
  
   }
  
  
  }