骨架屏样式优化

闫增涛

2024-04-12 672575a32ecd7f8e0bcd76152040657e9e57328a

骨架屏样式优化

 packageBookService/pages/bookServices/detail/components/relatedBooks/index.js

@@ -18,7 +18,12 @@
  /**
   * 组件的初始数据
   */
  data: {},
  data: {
    rowCol: [{
      size: '200rpx',
      borderRadius: '12rpx'
    }, 1],
  },

  /**
   * 组件的方法列表
@@ -37,4 +42,4 @@
      this.triggerEvent("goBookDetails", myEventDetail, myEventOption);
    },
  },
});
});

 packageBookService/pages/bookServices/detail/components/relatedBooks/index.wxml

@@ -1,5 +1,5 @@
<!--packageBookService/pages/bookServices/detail/components/relatedBooks/index.wxml-->
<view class="reletedBooks fl ">
<view class="reletedBooks fl">
  <view
    wx:for="{{relatedBookData}}"
    wx:key="id"
@@ -19,11 +19,24 @@
    <t-empty icon="folder-open" description="暂无数据" />
  </view>
  <view class="loading-box" wx:if="{{relatedBookLoading}}">
    <!-- relatedBookLoading -->
    <t-skeleton
    row-col="{{[1,1,1,1,1,1]}}"
    theme="paragraph"
    animation="gradient"
    loading="{{relatedBookLoading}}"
  ></t-skeleton>
      rowCol="{{rowCol}}"
      theme="paragraph"
      animation="gradient"
      loading="{{true}}"
    ></t-skeleton>
    <t-skeleton
      rowCol="{{rowCol}}"
      theme="paragraph"
      animation="gradient"
      loading="{{true}}"
    ></t-skeleton>
    <t-skeleton
      rowCol="{{rowCol}}"
      theme="paragraph"
      animation="gradient"
      loading="{{true}}"
    ></t-skeleton>
  </view>
</view>

 packageBookService/pages/bookServices/detail/components/relatedBooks/index.wxss

@@ -50,6 +50,8 @@
}

.loading-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: min-content;
}

 packageBookService/pages/bookServices/detail/index.js

@@ -134,6 +134,21 @@
    icon1: {
      name: "/static/images/bookService/detail/dangdang.png",
    },
    rowCol: [{
        width: '50%',
      },
      {
        width: '100%'
      },
      {
        width: '80%'
      },
      {
        width: '100%'
      }, {
        width: '100%'
      },
    ]
  },

  resetTree: function (e) {

 packageBookService/pages/bookServices/detail/index.wxml

@@ -230,7 +230,7 @@
            /> -->
            <view wx:if="{{loading}}" style="width: 100%; height: min-content">
              <t-skeleton
                row-col="{{[1,1,2,1,1,2]}}"
                row-col="{{rowCol}}"
                theme="paragraph"
                animation="gradient"
                loading="{{loading}}"

 packageBookService/pages/bookServices/examination/examination.wxml

@@ -1,7 +1,7 @@
<!--pages/examination/examination.wxml-->

<import src="examination.skeleton.wxml" />
<template is="skeleton" wx:if="{{true}}" />
<template is="skeleton" wx:if="{{loading}}" />

<!--导航区域 -->
<view

 pages/bookServices/assort/index.js

@@ -1,5 +1,7 @@
// pages/bookServices/assort/index.js
import { getPublicImage } from "../../../assets/js/middleGround/tool";
import {
  getPublicImage
} from "../../../assets/js/middleGround/tool";
const app = getApp();
Page({
  /**
@@ -88,18 +90,19 @@
    });
    const query = {
      path: "*",
      filterList: [
        {
          value: "Normal",
          field: "state",
        },
      ],
      filterList: [{
        value: "Normal",
        field: "state",
      }, ],
      queryType: "\\",
      searchList: [],
      size: "30",
      start: "0",
      storeRefCode: app.config.goodsStore,
      sort: { type: "Asc", field: "LinkOrder" },
      sort: {
        type: "Asc",
        field: "LinkOrder"
      },
    };
    app.MG.store.getStoreChannelList(query).then((res) => {
      const list = res.datas.filter(
@@ -135,29 +138,29 @@
    });
    const query = {
      path,
      filterList: [
        {
          value: "Normal",
          field: "state",
        },
      ],
      filterList: [{
        value: "Normal",
        field: "state",
      }, ],
      queryType: "\\",
      searchList: [],
      size: "30",
      start: "0",
      storeRefCode: app.config.goodsStore,
      sort: { type: "Asc", field: "LinkOrder" },
      sort: {
        type: "Asc",
        field: "LinkOrder"
      },
    };
    app.MG.store.getStoreChannelList(query).then(async (res) => {
      // 获取二级分类
      for (let index = 0; index < res.datas.length; index++) {
        const item = res.datas[index];
        item.icon
          ? (item.icon = getPublicImage(item.icon, 500))
          : (item.icon = item.icon);
        item.icon ?
          (item.icon = getPublicImage(item.icon, 500)) :
          (item.icon = item.icon);
        item.children = await this.getSecondList(item);
      }
      console.log(res.datas);
      // 一级分类赋值
      this.setData({
        startList: res.datas,
@@ -174,12 +177,10 @@
    let datas;
    const query = {
      path,
      filterList: [
        {
          value: "Normal",
          field: "state",
        },
      ],
      filterList: [{
        value: "Normal",
        field: "state",
      }, ],
      coverSize: {
        width: 500,
      },
@@ -188,7 +189,10 @@
      size: "30",
      start: "0",
      storeRefCode: app.config.goodsStore,
      sort: { type: "Asc", field: "LinkOrder" },
      sort: {
        type: "Asc",
        field: "LinkOrder"
      },
    };
    await app.MG.store.getStoreChannelList(query).then((res) => {
      for (let index = 0; index < res.datas.length; index++) {
@@ -205,7 +209,6 @@
      "startCheck.id": data.id,
      "startCheck.code": data.refCode,
    });
    console.log(data);
  },
  // 跳转列表页
  goPageList(e) {
@@ -231,4 +234,4 @@
      url: `/packageBookService/pages/bookServices/list/index?assorName=${this.data.assortCheck.name}&assortCode=${this.data.assortCheck.code}&stairCode=${this.data.startCheck.code}&searchValue=${e.detail.value}`,
    });
  },
});
});

 pages/bookServices/assort/index.skeleton.wxml

@@ -21,7 +21,7 @@
      <view style="width: 100%; height: 47px"></view>
      <view class="nacigationBar" style="width: 100%; height: 40px">
        <view
          class="navbar-title sk-transparent sk-text-14-2857-436 sk-text"
          class="navbar-title "
          style="background-position-x: 50%"
          >图书服务</view
        >

 pages/bookServices/assort/index.wxss

@@ -10,8 +10,7 @@
.navbar-title {
  text-align: center;
  color: #0F1214;
  font-size: 40rpx;
  font-weight: bold;
  font-size: 36rpx;
}

.page-header {