骨架屏优化

zhongshujie

2024-12-19 b0c9ad943427bca2de66d4683583ccc5f9bb3fb3

骨架屏优化

 packageBookService/pages/psychologyAnswer/psychologyAnswer.js

@@ -13,7 +13,7 @@
    dataList: "",
    barHeight: "",
    navBarHeight: "",
    loading: false,
    loading: true,
    answerTitle: "", // 导航栏标题
    submitStatus: false, // 提交状态
    currentIndex: 0, // 当前显示的题号

 packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxml

@@ -1,5 +1,5 @@
<!--
此文件为开发者工具生成，生成时间: 2024/12/19下午3:05:54
此文件为开发者工具生成，生成时间: 2024/12/19下午7:08:05
使用方法：
在 D:\JiaRuan\jsek-applet\packageBookService\pages\psychologyAnswer\psychologyAnswer.wxml 引入模板

@@ -17,74 +17,96 @@
-->
<template name="skeleton">
  <view class="sk-container">
    <view class="page" style="background-color:">
      <view class="page-content" style="background-color:">
        <view is="packageBookService/pages/psychologyAnswer/questionList/index">
          <view class="questionList-index--question-list" style="background-color:#fff">
            <view class="questionList-index--question-title" id="15fc288f--question-title">
              <rich-text class="questionList-index--substance" nodes="" space="emsp"></rich-text>
    <view class="page-content" style="background-color:">
      <view is="packageBookService/pages/bookServices/examination/questionSchedule/index" id="countDownRef">
        <view class="questionSchedule-index--schedule" id="401ba865--schedule" style="background-color:#fff">
          <view class="questionSchedule-index--schedule-top">
            <view class="questionSchedule-index--question-schedule sk-transparent" style="color: #000;">答题进度
              <text class="questionSchedule-index--parimary-color questionSchedule-index--question-num sk-transparent sk-opacity">0</text>
              <text class="sk-transparent sk-text-14-2857-972 sk-text">/31</text>
            </view>
            <swiper class="questionList-index--swiper" current="0" id="15fc288f--swiper" style="height:100%" autoplay="false">
              <swiper-item style="overflow-y: auto; position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
                <view class="questionList-index--question-stem questionList-index--title-score" style="color: #000; font-size: 16px;">
                  <text class="sk-transparent sk-text-14-2857-769 sk-text">1.</text>
                  <view class="questionList-index--title-content questionList-index--text-space sk-transparent sk-text-16-6667-358 sk-text">我不是一个很积极的人。</view>
            <view class="questionSchedule-index--remainder" style="color:  #000;">
              <view class="questionSchedule-index--remainder-text sk-transparent sk-text-14-2857-676 sk-text">剩余时间 </view>
              <view class="questionSchedule-index--parimary-color questionSchedule-index--remaining-time sk-transparent sk-text-14-2857-756 sk-text">01:59:53</view>
            </view>
          </view>
          <view class="questionSchedule-index--schedule-progress">
            <view class="t-progress progress--t-progress " style="true">
              <view class="t-progress--thin progress--t-progress--thin t-progress--status-- progress--t-progress--status-- ">
                <view class="t-progress__bar progress--t-progress__bar">
                  <view class="t-progress__inner progress--t-progress__inner " style="background-color: #efefef;"></view>
                </view>
                <view class="questionList-index--question-answer">
                  <view class="t-radio-group radio-group--t-radio-group questionList-index--radio-group " style="true">
                    <view>
                      <view class="t-radio radio--t-radio t-radio--right radio--t-radio--right t-radio--block radio--t-radio--block  " style="background-color: #fff;" tabindex="0">
                        <view class="t-radio__content radio--t-radio__content" data-target="text">
                          <view class="t-radio__title radio--t-radio__title " style="-webkit-line-clamp:3">
                            <view class="questionList-index--radio-item" style="font-size: 16px;">
                              <view class="questionList-index--text-space sk-transparent sk-text-16-6667-817 sk-text">
                                A、是
                              </view>
                            </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view is="packageBookService/pages/bookServices/examination/questionList/index">
        <view class="questionList-index--question-list" style="background-color:#fff">
          <view class="questionList-index--question-title" style="background-color:#fff">
            <text class="questionList-index--title-name sk-transparent sk-text-14-2857-835 sk-text">判断题</text>
            <text class="questionList-index--title-score sk-transparent sk-text-14-2857-843 sk-text" style="color: #000;">(每题2分)</text>
          </view>
          <swiper class="questionList-index--swiper" autoplay="false">
            <swiper-item style="overflow-y: auto; position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
              <view class="questionList-index--question-stem questionList-index--title-score" style="color: #000; font-size: 16px;">
                <text class="sk-transparent sk-text-14-2857-731 sk-text">1.</text>
                <view class="questionList-index--title-content sk-transparent sk-text-14-2857-317 sk-text">放热化学反应都能自动进行。</view>
              </view>
              <view class="questionList-index--question-answer">
                <view class="t-radio-group radio-group--t-radio-group questionList-index--radio-group " style="true">
                  <view>
                    <view class="t-radio radio--t-radio t-radio--right radio--t-radio--right t-radio--block radio--t-radio--block  ">
                      <view class="t-radio__content radio--t-radio__content" data-target="text">
                        <view class="t-radio__title radio--t-radio__title sk-transparent" style="-webkit-line-clamp:3">
                          <view class="questionList-index--radio-item" style="font-size: 16px;">
                            <text class="sk-transparent sk-text-16-6667-394 sk-text">A、对</text>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view>
                      <view class="t-radio radio--t-radio t-radio--right radio--t-radio--right t-radio--block radio--t-radio--block  " style="background-color: #fff;" tabindex="0">
                        <view class="t-radio__content radio--t-radio__content" data-target="text">
                          <view class="t-radio__title radio--t-radio__title t-radio__title--checked radio--t-radio__title--checked " style="-webkit-line-clamp:3">
                            <view class="questionList-index--radio-item questionList-index--radio-active" style="font-size: 16px;">
                              <view class="questionList-index--text-space sk-transparent sk-text-16-6667-488 sk-text">
                                B、否
                              </view>
                            </view>
                  </view>
                  <view>
                    <view class="t-radio radio--t-radio t-radio--right radio--t-radio--right t-radio--block radio--t-radio--block  " style="background-color: #fff;" tabindex="0">
                      <view class="t-radio__content radio--t-radio__content" data-target="text">
                        <view class="t-radio__title radio--t-radio__title sk-transparent" style="-webkit-line-clamp:3">
                          <view class="questionList-index--radio-item" style="font-size: 16px;">
                            <text class="sk-transparent sk-text-16-6667-51 sk-text">B、错</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
          </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <view class="page-bottom" style="background-color:">
        <view is="packageBookService/pages/psychologyAnswer/questionOptions/index" id="question-options">
          <view class="questionOptions-index--page-bottom" style="color: #000; background-color:#fff">
            <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
              <image class="sk-image"></image>
              答题卡
            </view>
            <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
              <image class="sk-image"></image>
              设置
            </view>
            <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
              <image class="sk-image"></image>
              重做
            </view>
            <view class="questionOptions-index--bottom-submit">
              <button app-parameter="true" data-custom="null" form-type="true" hover-class="t-button--hover" hover-start-time="20" hover-stay-time="70" lang="true" open-type="true" send-message-img="截图" send-message-path="当前分享路径" send-message-title="当前标题" session-from="true" style="width:166px;border-radius:31px;" class="t-button button--t-button t-button--base button--t-button--base t-button--primary button--t-button--primary t-button--rectangle button--t-button--rectangle t-button--size-large button--t-button--size-large sk-button sk-pseudo sk-pseudo-circle">
                <view class="t-button__content button--t-button__content sk-transparent sk-text-33-6735-874 sk-text" style="background-position-x: 50%;">提交</view>
              </button>
            </view>
    </view>
    <view class="page-bottom" style="background-color:">
      <view is="packageBookService/pages/bookServices/examination/questionOptions/index" id="question-options">
        <view class="questionOptions-index--page-bottom" style="color: #000; background-color:#fff">
          <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
            <image class="sk-image"></image>
            收藏
          </view>
          <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
            <image class="sk-image"></image>
            答题卡
          </view>
          <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
            <image class="sk-image"></image>
            设置
          </view>
          <view class="questionOptions-index--li-option sk-transparent" style="color: #000;">
            <image class="sk-image"></image>
            重做
          </view>
          <view class="questionOptions-index--bottom-submit">
            <button app-parameter="true" data-custom="null" form-type="true" hover-class="t-button--hover" hover-start-time="20" hover-stay-time="70" lang="en" open-type="true" send-message-img="true" send-message-path="true" send-message-title="true" session-from="true" style="width:166px;border-radius:31px;" class="t-button button--t-button t-button--base button--t-button--base t-button--primary button--t-button--primary t-button--rectangle button--t-button--rectangle t-button--size-large button--t-button--size-large sk-button sk-pseudo sk-pseudo-circle">
              <view class="t-button__content button--t-button__content sk-transparent sk-text-33-6735-471 sk-text" style="background-position-x: 50%;">提交</view>
            </button>
          </view>
        </view>
      </view>

 packageBookService/pages/psychologyAnswer/psychologyAnswer.skeleton.wxss

@@ -1,5 +1,5 @@
/*
此文件为开发者工具生成，生成时间: 2024/12/19下午3:05:54
此文件为开发者工具生成，生成时间: 2024/12/19下午7:08:05

在 D:\JiaRuan\jsek-applet\packageBookService\pages\psychologyAnswer\psychologyAnswer.wxss 中引入样式
```
@@ -9,67 +9,120 @@
更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
    color: transparent !important;
  }
.sk-text-14-2857-769 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 43.0769rpx;
    position: relative !important;
  }
  color: transparent !important;
}

.sk-opacity {
  opacity: 0 !important;
}

.sk-text-14-2857-972 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 37.6923rpx;
  position: relative !important;
}

.sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
  }
.sk-text-16-6667-358 {
    background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
    background-size: 100% 46.1538rpx;
    position: relative !important;
  }
.sk-text-16-6667-817 {
    background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
    background-size: 100% 46.1538rpx;
    position: relative !important;
  }
.sk-text-16-6667-488 {
    background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
    background-size: 100% 46.1538rpx;
    position: relative !important;
  }
.sk-text-33-6735-874 {
    background-image: linear-gradient(transparent 33.6735%, #EEEEEE 0%, #EEEEEE 66.3265%, transparent 0%) !important;
    background-size: 100% 94.2308rpx;
    position: relative !important;
  }
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}

.sk-text-14-2857-676 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 37.6923rpx;
  position: relative !important;
}

.sk-text-14-2857-756 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 37.6923rpx;
  position: relative !important;
}

.sk-text-14-2857-835 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 37.6923rpx;
  position: relative !important;
}

.sk-text-14-2857-843 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 37.6923rpx;
  position: relative !important;
}

.sk-text-14-2857-731 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}

.sk-text-14-2857-317 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}

.sk-text-16-6667-394 {
  background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
  background-size: 100% 46.1538rpx;
  position: relative !important;
}

.sk-text-16-6667-51 {
  background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
  background-size: 100% 46.1538rpx;
  position: relative !important;
}

.sk-text-33-6735-471 {
  background-image: linear-gradient(transparent 33.6735%, #EEEEEE 0%, #EEEEEE 66.3265%, transparent 0%) !important;
  background-size: 100% 94.2308rpx;
  position: relative !important;
}

.sk-button {
    color: #EFEFEF !important;
    background: #EFEFEF !important;
    border: none !important;
    box-shadow: none !important;
  }
  color: #EFEFEF !important;
  background: #EFEFEF !important;
  border: none !important;
  box-shadow: none !important;
}

.sk-image {
    background: #EFEFEF !important;
  }
.sk-pseudo::before, .sk-pseudo::after {
      background: #EFEFEF !important;
      background-image: none !important;
      color: transparent !important;
      border-color: transparent !important;
    }
.sk-pseudo-rect::before, .sk-pseudo-rect::after {
      border-radius: 0 !important;
    }
.sk-pseudo-circle::before, .sk-pseudo-circle::after {
      border-radius: 50% !important;
    }
  background: #EFEFEF !important;
}

.sk-pseudo::before,
.sk-pseudo::after {
  background: #EFEFEF !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}

.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}

.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}

.sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
  }
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}

.t-progress__inner {
  background-color: #efefef;
}