看下代码片段如何显示

新手上路,请多包涵
<!-- 固定的标题 -->
    <div class="answer-nav-bar-wp--fix" v-show="fixedStatus">
      <van-nav-bar
        @click-left="handleClickLeft"
        :title="titleNav"
        left-arrow
        class="nav-bar"
        :border="false"
        ref="vanNavBarRef"
      >
        <template #left>
          <img src="@/assets/navbar_ic_back.png" alt="" />
          <div class="answer-nav-bar-left" @click.stop="gotoPage">
            <div class="answer-nav-bar-left--title ellipsis-1">
              {{ title }}
            </div>
            <div class="answer-nav-bar-left--num">
              {{ $t("question.questionDetail") }} · {{ replyListTotal || 0
              }}{{ $t("question.numAnswer") }}
              <em class="fsic icic_all_right"></em>
            </div>
          </div>
        </template>
        <template #right>
          <img
            style="width: 20px;height:20px;margin-right:10px"
            src="@/assets/ic_question_share.png"
            alt="share"
            @click.stop="handleShare"
          />
          <img
            @click.stop="handleRightClick"
            src="@/assets/navbar_ic_more.png"
            alt=""
          />
        </template>
      </van-nav-bar>
      <!-- v-if="canRead" -->
      <div class="content">
        <!-- <div class="answer-nav-bar-left--num" @click.stop="gotoPage">
                    {{ $t("question.questionDetail") }} ·
                    {{ replyListTotal || 0 }}{{ $t("question.numAnswer") }}
                    <em class="fsic icic_all_right"></em>
                  </div> -->
        <!-- 邀请回答、写回答 -->
        <div class="edit-content flexStyle alignCenter justifyEvenly">
          <!-- 邀请回答 -->
          <div
            v-if="canInviteAnswer"
            class="action-item flex-1"
            @click="inviteAnswer"
          >
            <img
              class="action-item-img"
              src="@/assets/home/invite1.png"
              alt="edit"
            />{{ $t("question.invistAnswer") }}
          </div>
          <!-- 写回答 -->
          <div class="action-item flex-1 blue" @click="gotoAnswer()">
            <img
              class="action-item-img"
              src="@/assets/home/answer-light.png"
              alt="edit"
            />{{
              selfAnswerId
                ? $t("question.editAnswer")
                : $t("question.writeAnswer")
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="answer-detail-wrapper flexStyle flexColumn">
      <div
        v-bind="{
          praised,
          praiseCount,
          canCollect,
          favoriteStatus,
          likeStatus
        }"
      ></div>

      <div class="swiper-container" ref="containerRef">
        <div
          class="swiper-wrapper"
          :class="{
            'has-top': !(
              currAnswerIdx === currIndex &&
              (!fixedStatus || (fixedStatus && !transitioning))
            )
          }"
          :style="{
            'padding-top':
              currAnswerIdx === currIndex &&
              (!fixedStatus || (fixedStatus && !transitioning))
                ? 0
                : '27vw'
          }"
          style="-webkit-transition-duration:300ms"
        >
          <div
            class="swiper-slide"
            :class="{
              [`swiper-slide-transtion-${swipeDirection}`]: transitioning,
              'swiper-slide-custom-active': $index === currIndex,
              'swiper-slide-custom-next': $index === currIndex + 1,
              'swiper-slide-custom-prev': $index === currIndex - 1
            }"
            v-for="(item, $index) in replyList"
            :key="$index"
          >
            <!-- 仅渲染当前以及下一个 -->
            <div
              class="answer-content-wrapper"
              v-if="$index <= currIndex + 1 && $index >= currIndex - 1"
            >
              <next-answer-content
                :replyList="replyList"
                :answerDetail="replyList[$index]"
                :nextAnswerDetail="
                  $index < replyListLen - 1 ? replyList[$index + 1] : {}
                "
                :operTabOpts="{
                  praised,
                  praiseCount,
                  canCollect,
                  favoriteStatus,
                  likeStatus
                }"
                @onOperTabEmit="handleOperTabEmit"
                :status="pageStatus"
                :index="$index"
                :curIndex="currIndex"
                :currAnswerIdx="currAnswerIdx"
                :issuesDetail="issuesDetail"
                :key="$index"
                @lock="handleLock"
                @unLock="handleUnLock"
                ref="answerContentRef"
              >
                <!-- 当前回答滑动完之后  如果存在上一个回答 显示上一个回答提示 -->
                <!-- 上一个回答提示 start -->
                <div slot="last-tip" style="position:relative">
                  <div
                    v-if="$index === currIndex && currIndex > 0"
                    class="slide-status"
                    :style="{
                      opacity: transitioning ? 0 : 1,
                      position: 'absolute',
                      top: '-1.06667rem'
                    }"
                  >
                    {{ statusText }}
                  </div>
                </div>
                <!-- 上一个回答提示 end -->
                <!-- 问题 start -->
                <template slot="swiperTitle">
                  <van-nav-bar
                    @click-left="handleClickLeft"
                    fixed
                    :title="titleNav"
                    left-arrow
                    class="nav-bar"
                    :border="false"
                    ref="vanNavBarRef"
                  >
                    <template #left>
                      <img src="@/assets/navbar_ic_back.png" alt="" />
                    </template>
                    <template #right>
                      <img
                        style="width: 20px;height:20px;margin-right:10px"
                        src="@/assets/ic_question_share.png"
                        alt="share"
                        @click.stop="handleShare"
                      />
                      <img
                        @click.stop="handleRightClick"
                        src="@/assets/navbar_ic_more.png"
                        alt=""
                      />
                    </template>
                  </van-nav-bar>
                  <!-- inner-content--fixed -->
                  <div
                    class="content"
                    style="margin-top:1.17333rem;position:relative;z-index:3;"
                  >
                    <div class="inner-content--fixed">
                      <div class="question-content" ref="questionContentRef">
                        <!-- 话题标签 -->
                        <div
                          class="topic-content"
                          v-if="labels && labels.length > 0"
                        >
                          <van-button
                            v-for="item in labels"
                            :key="item.id"
                            type="info"
                            size="small"
                            class="normal-like"
                          >
                            {{ item.configValue }}
                          </van-button>
                        </div>
                        <!-- 标题 -->
                        <div @click="gotoPage">
                          <div class="title">
                            <h2 class="title-text">{{ title }}</h2>
                          </div>
                          <div class="number flexStyle alignCenter">
                            {{ $t("question.questionDetail") }} ·
                            {{ replyListTotal || 0
                            }}{{ $t("question.numAnswer") }}
                            <img src="@/assets/ic_right_blue.png" alt="" />
                          </div>
                        </div>
                      </div>
                      <!-- 邀请回答、写回答 -->
                      <div
                        class="edit-content flexStyle alignCenter justifyEvenly"
                      >
                        <!-- 邀请回答 -->
                        <div
                          v-if="canInviteAnswer"
                          class="action-item flex-1"
                          @click="inviteAnswer"
                        >
                          <img
                            class="action-item-img"
                            src="@/assets/home/invite1.png"
                            alt="edit"
                          />{{ $t("question.invistAnswer") }}
                        </div>
                        <!-- 写回答 -->
                        <div
                          class="action-item flex-1 blue"
                          @click="gotoAnswer()"
                        >
                          <img
                            class="action-item-img"
                            src="@/assets/home/answer-light.png"
                            alt="edit"
                          />{{
                            selfAnswerId
                              ? $t("question.editAnswer")
                              : $t("question.writeAnswer")
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                </template>

                <!-- </van-sticky> -->
                <!-- 问题 end -->
              </next-answer-content>
              <div
                class="answer-content-loading-mask"
                v-show="$index === currIndex - 1 && transitioning"
              ></div>
            </div>
            <!-- 模仿知乎上一个回答加载中 -->
            <div class="swiper-skeleton">
              <van-skeleton title avatar :row="8" />
            </div>
            <!-- 上一个回答保留拖拽状态栏 上拉以提示用户 -->
            <!-- 上一个回答提示放在这里会显示在上个回答底部 很奇怪 -->
            <!-- <div
              v-if="$index === currIndex - 1"
              class="slide-status"
              :style="{ opacity: transitioning ? 0 : 1 }"
            >
              {{ statusText }}
            </div> -->
          </div>
        </div>
      </div>
    </div>
阅读 578
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题