title: 图文详情页 header: develop nav: extended sidebar: template

webUrl: https://qft12m.smartapps.cn/extensions/component/smt-detail-pages/smt-detail-pages

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

示例

扫码体验

webUrl: https://qft12m.smartapps.cn/extensions/component/smt-detail-pages/smt-detail-pages - 图1

使用方法

  1. 在小程序根目录下执行如下命令行，引入页面模板。
  1. npm i @smt-ui-template/page-content-detail

代码示例

:::codeTab

  1. <view class="wrap">
  2.     <view s-if="!showPageStatus" class="content-header" ></view>
  3.     <scroll-view scroll-y scroll-top="{=scrollTop=}" s-if="!showPageStatus" class="content-container {{isPhoneX ? 'content-container-ipx' : ''}}" bindscroll="onPageScroll" bindtouchmove="scrollPage" bindtouchstart="touchstart">
  4.         <view class="content-title">
  5.             <text selectable>{{title}}</text>
  6.         </view>
  7.         <view class="content-desp">
  8.             <view class="author-detail" bindtap="tapuser" data-user-id="{{authorId}}">
  9.                 <image class="author-avator" mode="widthFix" src="{{avator}}"></image>
  10.                 <view class="author-other">
  11.                     <view class="author-name">{{author}}</view>
  12.                     <view class="publish-date">{{date}}</view>
  13.                 </view>
  14.             </view>
  15.             <button s-if="showFollowBtn" class="follow-btn" size="mini" type="{{isFollow ? 'default' : 'primary'}}" bindtap="tapfollow" loading="{{btnLoading}}">{{btnLoading ? '' : (isFollow ? '已关注' : '关注')}}</button>
  16.         </view>
  17.         <view class="content-detail">
  18.             <view s-for="item in content" class="detail-{{item.type}}">
  19.                 <quote s-if="item.type == 'quote'" content="{{item.content}}"></quote>
  20.                 <text selectable s-if="item.type == 'p' || item.type == 'title'">{{item.content}}</text>
  21.                 <image lazy-load s-if="item.type == 'img'" mode="widthFix" src="{{item.content}}"  data-src="{{item.content}}" bindtap="tapimg" bindlongpress="longtapimg"></image>
  22.             </view>
  23.         </view>
  24.         <top class="top-view {{showTopBtn ? 'top-view-show' : 'top-view-hide'}}" bind:top="backToTop"></top>
  25.     </scroll-view>
  26. </view>

:::

  1. 获取数据：获取文章详情、页面跳转、关注/取消关注。

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

    1.       getArticleDetail(articleId, cb) {
    2.       let params = {
    3.           url: '',
    4.           method: 'GET',
    5.           data: {
    6.               articleId
    7.           },
    8.      ...

    :::

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

:::codeTab

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

:::

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

:::codeTab

  1.         tapfollow(e) {
  2.             ...
  3.             let params = {
  4.                 url: '',
  5.                 method: 'POST',
  6.                 data: {
  7.                     authorId: this.data.authorId
  8.                 },
  9.             ...
  10.         }

:::

Bug & Tip

  • Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。
  • Tip：模板中内置了部分数据记录，你可以定义自己需要记录的数据。
  • Tip: 页面模板功能从开发者工具 v2.25.1-rc 版本开始支持