图文详情页

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

示例

扫码体验

使用方法

-

npm i @smt-ui-template/page-content-detail

代码示例

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

• 获取数据：获取文章详情、页面跳转、关注/取消关注。
• 获取内容详情所需要的数据，请修改为相关的请求地址参数

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

  -

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

  -

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

  Bug & Tip

• -