From e9fdd711a4c83a70d157040463b5e729fc981106 Mon Sep 17 00:00:00 2001
From: lucky <srf428110@163.com>
Date: Wed, 21 Jul 2021 11:11:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=AA=A8=E6=9E=B6=E5=B1=8F=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                 |   1 +
 src/__MACOSX/._components                    | Bin 0 -> 212 bytes
 src/__MACOSX/components/._J-skeleton         | Bin 0 -> 212 bytes
 src/components/Globals/Globals.vue           |  44 +++--
 src/components/Roles/component/RoleList.vue  |  96 ++++++++--
 src/components/Roles/components/RoleList.vue | 183 ------------------
 src/components/Skeleton/READ_ME.md           |  84 +++++++++
 src/components/Skeleton/Skeleton.vue         | 186 +++++++++++++++++++
 src/components/Skeleton/view.vue             |  45 +++++
 src/package.json                             |  12 ++
 10 files changed, 439 insertions(+), 212 deletions(-)
 create mode 100644 src/__MACOSX/._components
 create mode 100644 src/__MACOSX/components/._J-skeleton
 delete mode 100644 src/components/Roles/components/RoleList.vue
 create mode 100644 src/components/Skeleton/READ_ME.md
 create mode 100644 src/components/Skeleton/Skeleton.vue
 create mode 100644 src/components/Skeleton/view.vue
 create mode 100644 src/package.json

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b91adc..441319d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@
 --|--|--
  - | 角色栏修改 | [19228d6](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/19228d6)
  - | 上下滚动时间轴 | [d533a01](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/d533a01)
+ - | 时间轴上下滚动数据加载bug修改 | [e82ede4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e82ede4)
  - | 时间轴上下滑动 | [4d0ae46](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4d0ae46)
  - | 提示信息显示bug及日常任务收缩问题 | [f2f06c5](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f2f06c5)
  - | 修改角色栏组件 | [a54c601](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a54c601)
diff --git a/src/__MACOSX/._components b/src/__MACOSX/._components
new file mode 100644
index 0000000000000000000000000000000000000000..90ab7db112e530b263ab7225a0f634508257ca7c
GIT binary patch
literal 212
zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDI}@gg7w@vi_e5x_AdBnYYuq+<pU+n{M<
zM2L$f=jZAr78K;9>J^qI7A5ADWagzZ6zUroSQuKHrX;1ACtDg@J7*N-=cZaao0=Jz
lxLTU&nz)&|=$beiI_o+bIhyOb8M-)`8JjyBS{R!$005FRAF2QV

literal 0
HcmV?d00001

diff --git a/src/__MACOSX/components/._J-skeleton b/src/__MACOSX/components/._J-skeleton
new file mode 100644
index 0000000000000000000000000000000000000000..90ab7db112e530b263ab7225a0f634508257ca7c
GIT binary patch
literal 212
zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDI}@gg7w@vi_e5x_AdBnYYuq+<pU+n{M<
zM2L$f=jZAr78K;9>J^qI7A5ADWagzZ6zUroSQuKHrX;1ACtDg@J7*N-=cZaao0=Jz
lxLTU&nz)&|=$beiI_o+bIhyOb8M-)`8JjyBS{R!$005FRAF2QV

literal 0
HcmV?d00001

diff --git a/src/components/Globals/Globals.vue b/src/components/Globals/Globals.vue
index 8869917..df24c93 100644
--- a/src/components/Globals/Globals.vue
+++ b/src/components/Globals/Globals.vue
@@ -1,22 +1,23 @@
 <template>
   <view class="m-2">
-    <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" :style="{ height: isShrink ? '96rpx' : '300rpx' }">
+    <u-card :show-foot="false" :show-head="false" :style="{ height: isShrink ? '96rpx' : '300rpx' }" border-radius="25" margin="0">
       <!-- <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" style="height: 300rpx"> -->
       <view slot="body">
         <scroll-view :scrollY="true" :style="{ height: isShrink ? '40rpx' : '240rpx' }">
-          <view class="u-col-between p-0 u-skeleton">
-            <view class="u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆222</view>
+          <skeleton :banner="false" :loading="loading" :row="4" animate class="u-line-2 mt-2 skeleton"></skeleton>
+          <view class="u-col-between p-0" v-if="!loading">
+            <view class="u-line-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 mt-2">瓶身描绘的牡丹一如你初妆222</view>
           </view>
         </scroll-view>
       </view>
@@ -27,12 +28,21 @@
 
 <script>
 import { mapState } from 'vuex';
+import Skeleton from '@/components/Skeleton/Skeleton';
+
 export default {
   name: 'Global',
+  components: { Skeleton },
   data() {
-    return {};
+    return { loading: true };
   },
   computed: mapState('home', ['isShrink']),
+  mounted() {
+    setTimeout(() => {
+      this.loading = false;
+      console.log('this.loading: ', this.loading);
+    }, 5000);
+  },
 };
 </script>
 
@@ -55,4 +65,8 @@ export default {
   border-radius: 8rpx;
   margin-left: 12rpx;
 }
+
+.skeleton:first-child {
+  margin-top: 0 !important;
+}
 </style>
diff --git a/src/components/Roles/component/RoleList.vue b/src/components/Roles/component/RoleList.vue
index 261893c..5582f1d 100644
--- a/src/components/Roles/component/RoleList.vue
+++ b/src/components/Roles/component/RoleList.vue
@@ -1,15 +1,15 @@
 <template>
-  <view class="wrap">
-    <view class="homeBox">
+  <view>
+    <view class="homeBox u-skeleton">
       <scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x>
         <view class="tabBox">
           <view :key="index" @click="changeIndex(index)" class="tab-item" v-for="(item, index) in roles">
             <view :class="setColor(item.mine, tabIndex, index)" class="tab-children u-skeleton-rect">{{ item.name }}</view>
           </view>
         </view>
-        <u-skeleton :animation="true" :loading="loading" bgcolor="#fff"></u-skeleton>
       </scroll-view>
     </view>
+    <u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton>
   </view>
 </template>
 
@@ -22,16 +22,76 @@ export default {
       tabList: [], //tab dom节点集合
       scrollLeft: 0, //scrollview需要滚动的距离
       roles: [
-        { id: 1, name: '项目经理', mine: 0, pm: 1, sequence: 1 },
-        { id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 },
-        { id: 3, name: '导师一', mine: 1, pm: 0, sequence: 3 },
-        { id: 4, name: '导师二', mine: 1, pm: 0, sequence: 4 },
-        { id: 5, name: '导师三', mine: 1, pm: 0, sequence: 5 },
-        { id: 6, name: '导师四', mine: 1, pm: 0, sequence: 6 },
-        { id: 7, name: '导师五', mine: 1, pm: 0, sequence: 7 },
-        { id: 8, name: '导师六', mine: 1, pm: 0, sequence: 8 },
-        { id: 9, name: '导师七', mine: 1, pm: 0, sequence: 9 },
-        { id: 10, name: '导师八', mine: 1, pm: 0, sequence: 10 },
+        {
+          id: 1,
+          name: '项目经理',
+          mine: 0,
+          pm: 1,
+          sequence: 1,
+        },
+        {
+          id: 2,
+          name: '运维',
+          mine: 0,
+          pm: 0,
+          sequence: 2,
+        },
+        {
+          id: 3,
+          name: '导师一',
+          mine: 1,
+          pm: 0,
+          sequence: 3,
+        },
+        {
+          id: 4,
+          name: '导师二',
+          mine: 1,
+          pm: 0,
+          sequence: 4,
+        },
+        {
+          id: 5,
+          name: '导师三',
+          mine: 1,
+          pm: 0,
+          sequence: 5,
+        },
+        {
+          id: 6,
+          name: '导师四',
+          mine: 1,
+          pm: 0,
+          sequence: 6,
+        },
+        {
+          id: 7,
+          name: '导师五',
+          mine: 1,
+          pm: 0,
+          sequence: 7,
+        },
+        {
+          id: 8,
+          name: '导师六',
+          mine: 1,
+          pm: 0,
+          sequence: 8,
+        },
+        {
+          id: 9,
+          name: '导师七',
+          mine: 1,
+          pm: 0,
+          sequence: 9,
+        },
+        {
+          id: 10,
+          name: '导师八',
+          mine: 1,
+          pm: 0,
+          sequence: 10,
+        },
       ],
       loading: true, // 是否显示骨架屏组件
     };
@@ -50,7 +110,10 @@ export default {
       const data = document.getElementsByClassName('tab-children');
       // TODO 第一步 获取当前所以子元素 并插入到 tabList 列表中
       data.forEach(item => {
-        this.tabList.push({ width: item.clientWidth, left: item.offsetLeft });
+        this.tabList.push({
+          width: item.clientWidth,
+          left: item.offsetLeft,
+        });
       });
     },
 
@@ -126,6 +189,7 @@ export default {
       color: $roleChoiceColor;
       font-weight: 600;
     }
+
     .default-tab-choice:before {
       content: '';
       position: absolute;
@@ -177,4 +241,8 @@ scroll-view ::v-deep ::-webkit-scrollbar {
 }
 
 /* #endif */
+
+.skeleton {
+  height: 44rpx;
+}
 </style>
diff --git a/src/components/Roles/components/RoleList.vue b/src/components/Roles/components/RoleList.vue
deleted file mode 100644
index d0c3445..0000000
--- a/src/components/Roles/components/RoleList.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<template>
-  <view class="wrap">
-    <view class="homeBox">
-      <scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x>
-        <view class="tabBox u-skeleton">
-          <view :key="index" @click="changeIndex(index)" class="tab-item" v-for="(item, index) in roles">
-            <view :class="setColor(item.isMine, tabIndex, index)" class="tab-children u-skeleton-rect">{{ item.value }}</view>
-          </view>
-        </view>
-        <u-skeleton :animation="true" :loading="loading" bgcolor="#fff"></u-skeleton>
-      </scroll-view>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'RoleList',
-  data() {
-    return {
-      tabIndex: 0, //当前访问的 index 默认为0
-      tabList: [], //tab dom节点集合
-      scrollLeft: 0, //scrollview需要滚动的距离
-      roles: [
-        { id: 1, value: '项目经理', isMine: 0 },
-        { id: 2, value: '运维', isMine: 0 },
-        { id: 3, value: '导师一', isMine: 1 },
-        { id: 4, value: '导师二', isMine: 1 },
-        { id: 5, value: '导师三', isMine: 1 },
-        { id: 6, value: '导师四', isMine: 1 },
-        { id: 7, value: '导师五', isMine: 1 },
-        { id: 8, value: '导师六', isMine: 1 },
-        { id: 9, value: '导师七', isMine: 1 },
-        { id: 10, value: '导师八', isMine: 1 },
-      ],
-      loading: true, // 是否显示骨架屏组件
-    };
-  },
-
-  mounted() {
-    this.init();
-    setTimeout(() => {
-      this.loading = false;
-      console.log('this.loading: ', this.loading);
-    }, 5000);
-  },
-
-  methods: {
-    init() {
-      const data = document.getElementsByClassName('tab-children');
-      // TODO 第一步 获取当前所以子元素 并插入到 tabList 列表中
-      data.forEach(item => {
-        this.tabList.push({ width: item.clientWidth, left: item.offsetLeft });
-      });
-    },
-
-    changeIndex(index) {
-      //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
-      this.tabIndex = index;
-      //当前滚动的位置
-      let left = 0;
-      let screenWidth = window.screen.width;
-      for (let i = 0; i < index; i++) {
-        left += this.tabList[i].width + this.tabList[i].left * 2;
-      }
-      left += this.tabList[index].width;
-      this.scrollLeft = left - screenWidth / 2;
-    },
-
-    // 设置文字颜色
-    setColor(isMine, tabIndex, index) {
-      if (isMine === 1 && tabIndex === index) {
-        return 'default-tab-choice';
-      }
-      if (isMine === 1 && tabIndex !== index) {
-        return 'default-tab-item';
-      }
-      if (isMine === 0 && tabIndex === index) {
-        return 'tab-choice';
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-$tabChoiceColor: #f40; //设置选中文字和底部下划线背景颜色
-$max: 100%;
-
-// 这是最外层盒子
-.wrap {
-  position: relative;
-  background: #f7f7f7;
-}
-
-.homeBox {
-  // 对此盒子进行 sticky 粘性定位
-  position: sticky;
-  top: 0;
-  background: #fff; //设置背景 否则会透明
-  /* #ifdef H5 */
-  //粘性定位 在h5下 加 原生头部高度 44px
-  top: 88rpx;
-
-  /* #endif */
-  .tabBox {
-    position: relative;
-    white-space: nowrap;
-    // height: 88rpx;
-
-    /* #ifdef MP-TOUTIAO */
-    /* #endif */
-    .tab-item {
-      padding: 15rpx 24rpx;
-      position: relative;
-      display: inline-block;
-      text-align: center;
-      font-size: 30rpx;
-      transition-property: background-color, width;
-    }
-
-    .default-tab-item {
-      color: $tabChoiceColor;
-    }
-
-    .default-tab-choice {
-      //当前选中 基于此类名给与底部选中框
-      position: relative;
-      color: $tabChoiceColor;
-      font-weight: 600;
-    }
-    .default-tab-choice:before {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: -14rpx;
-      width: 100%;
-      height: 6rpx;
-      border-radius: 2rpx;
-      background: $tabChoiceColor;
-    }
-
-    .tab-choice {
-      //当前选中 基于此类名给与底部选中框
-      position: relative;
-      color: $uni-color-primary;
-      font-weight: 600;
-    }
-
-    .tab-choice:before {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: -14rpx;
-      width: 100%;
-      height: 6rpx;
-      border-radius: 2rpx;
-      background: $uni-color-primary;
-    }
-  }
-}
-
-// // 删除 底部滚动条
-/* #ifndef APP-NVUE */
-::-webkit-scrollbar,
-::-webkit-scrollbar,
-::-webkit-scrollbar {
-  display: none;
-  width: 0 !important;
-  height: 0 !important;
-  -webkit-appearance: none;
-  background: transparent;
-}
-
-/* #endif */
-/* #ifdef H5 */
-// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
-scroll-view ::v-deep ::-webkit-scrollbar {
-  display: none;
-}
-
-/* #endif */
-</style>
diff --git a/src/components/Skeleton/READ_ME.md b/src/components/Skeleton/READ_ME.md
new file mode 100644
index 0000000..09ccf28
--- /dev/null
+++ b/src/components/Skeleton/READ_ME.md
@@ -0,0 +1,84 @@
+# skeleton组件
+
+### 1.描述
+> 此组件用于加载数据时占位图显示，跟vant-ui骨架屏用法相似，但比vant-ui更灵活
+
+
+
+### 2.用法
+
+- 基本用法
+
+代码：
+```vue
+//基本用法
+<skeleton :row="3" animate :loading="loading" >
+  <view>
+    content
+  </view>
+</skeleton>
+```
+
+
+- **显示 title ——通过 **title 属性显示title占位图
+
+代码：
+```vue
+//显示 title——通过 title 属性显示title占位图
+<skeleton :row="3" title animate :loading="loading">
+  <view>
+    content
+  </view>
+</skeleton>
+```
+
+
+- 显示头像（上面)——通过avatar=‘top’让头像的占位图上面显示
+
+代码：
+```vue
+<skeleton  :avatar="top"  avatarAlign="left" :row="3" animate :loading="loading" style="margin-top:24rpx;">
+  <view>
+    content
+  </view>
+</skeleton>
+```
+
+
+- 显示头像（左边)——通过avatar=‘left’让头像的占位图左边显示
+
+代码：
+```vue
+<skeleton title :avatar="left" :row="3" animate :loading="loading" style="margin-top:24rpx;">
+  <view>
+    content
+  </view>
+</skeleton>
+```
+
+
+- 显示banner**——通过 **banner属性显示banner占位图（只显示banner，不显示内容占位图时设置row="0"）
+
+代码：
+```vue
+<skeleton banner :row="0" animate :loading="loading" style="margin-top:24rpx;">
+  <view>
+    content
+  </view>
+</skeleton>
+```
+### 
+### 3. API
+### Props
+| **属性名** | **说明** | **类型** | **默认值** | 可取值 |
+| --- | --- | --- | --- | --- |
+| loading | 是否显示骨架屏 | Boolean | true | true/false |
+| row | 段落行数 | Number | String | 3 | 0表示不展现 |
+| rowWidth | 段落行宽度 | Boolean &#124; Number | '100%' |  |
+| title | 是否显示标题 | Boolean &#124; String | false |  |
+| banner | 是否显示banner | Boolean &#124; String | false |  |
+| animate | 是否开启动画 | Boolean &#124; String | false |  |
+| avatar | 头像位置 | Boolean &#124; String | ''空 | left/top |
+| avatarSize | 头像大小 | String | - |  |
+| avatarShape | 头像形状 | String | circle | circle/round |
+
diff --git a/src/components/Skeleton/Skeleton.vue b/src/components/Skeleton/Skeleton.vue
new file mode 100644
index 0000000..c5e2d59
--- /dev/null
+++ b/src/components/Skeleton/Skeleton.vue
@@ -0,0 +1,186 @@
+<template>
+  <view>
+    <view :class="[avatarClass, animationClass]" class="lx-skeleton" v-show="loading">
+      <view :class="[avatarShapeClass, bannerClass]" :style="{ width: avatarSize, height: avatarSize }" class="avatar-class"></view>
+      <view :style="{ width: rowWidth }" class="row">
+        <view class="row-class lx-skeleton_title" v-if="title"></view>
+        <view :key="index" class="row-class" v-for="(item, index) in row"></view>
+      </view>
+    </view>
+    <slot v-if="!loading"></slot>
+  </view>
+</template>
+
+<script>
+/**
+ * skeleton 骨架屏
+ * @description 用于加载数据时占位图显示，跟Vant-UI用法相似，但比Vant-UI更灵活
+ * @property {Boolean} loading 是否显示骨架屏，默认为true
+ * @property {Number | String} row 段落行数，默认为3
+ * @property {Boolean | Number} rowWidth 段落行宽度，默认为100%
+ * @property {Boolean | String} title 是否显示标题，默认为false
+ * @property {Boolean | String} banner 是否显示banner，默认为false
+ * @property {Boolean | String} animate 是否开启动画，默认为false
+ * @property {Boolean | String} avatar 头像位置
+ * @property {String} avatarSize 头像大小
+ * @property {String} avatarShape 头像形状，默认为circle
+ *
+ * */
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+    row: {
+      type: Number,
+      default: 3,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    avatar: {
+      type: String,
+      default: '',
+    },
+    animate: {
+      type: Boolean,
+      default: false,
+    },
+    avatarSize: { type: String },
+    rowWidth: {
+      type: String,
+      default: '100%',
+    },
+    avatarShape: {
+      type: String,
+      default: 'circle',
+    },
+    banner: {
+      type: Boolean,
+      default: false,
+    },
+    // avator-size:{
+    // 	type: String,
+    // 	defualt: '32px'
+    // }
+  },
+  computed: {
+    avatarClass() {
+      if (this.avatar == 'top') {
+        return ['lx-skeleton_avator__top'];
+      } else if (this.avatar == 'left') {
+        return ['lx-skeleton_avator__left'];
+      } else {
+        return '';
+      }
+    },
+    animationClass() {
+      return [this.animate ? 'lx-skeleton_animation' : ''];
+    },
+    slotClass() {
+      return [!this.loading ? 'show' : 'hide'];
+    },
+    avatarShapeClass() {
+      return [this.avatarShape == 'round' ? 'lx-skeleton_avator__round' : ''];
+    },
+    bannerClass() {
+      return [this.banner ? 'lx-skeleton_banner' : ''];
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.lx-skeleton {
+  background-color: #fff;
+  padding: 12px;
+}
+
+.lx-skeleton_avator__left {
+  display: flex;
+  width: 100%;
+}
+
+.lx-skeleton_avator__left .avatar-class,
+.lx-skeleton_avator__top .avatar-class {
+  background-color: #f2f3f5;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+}
+
+.lx-skeleton_avator__left .avatar-class.lx-skeleton_avator__round,
+.lx-skeleton_avator__top .avatar-class.lx-skeleton_avator__round {
+  border-radius: 0;
+  width: 32px;
+  height: 32px;
+}
+
+.lx-skeleton_avator__left .avatar-class {
+  margin-right: 16px;
+}
+
+.lx-skeleton_avator__top .avatar-class {
+  margin: 0 auto 12px auto;
+}
+
+.row-class {
+  width: 100%;
+  height: 16px;
+  background-color: #f2f3f5;
+}
+
+.row-class:not(:first-child) {
+  margin-top: 12px;
+}
+
+.row {
+  flex: 1;
+}
+
+.lx-skeleton_avator__left .row {
+  width: calc(100% - 48px);
+}
+
+.row-class:nth-last-child(1) {
+  width: 60%;
+}
+
+.lx-skeleton_animation .row-class {
+  animation-duration: 1.5s;
+  animation-name: blink;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0.6;
+  }
+}
+
+.lx-skeleton_title {
+  width: 40%;
+}
+
+.show {
+  display: block;
+}
+
+.hide {
+  display: none;
+}
+
+.lx-skeleton .lx-skeleton_banner {
+  width: 92%;
+  margin: 10px auto;
+  height: 64px;
+  border-radius: 0;
+  background-color: #f2f3f5;
+}
+</style>
diff --git a/src/components/Skeleton/view.vue b/src/components/Skeleton/view.vue
new file mode 100644
index 0000000..4d27e62
--- /dev/null
+++ b/src/components/Skeleton/view.vue
@@ -0,0 +1,45 @@
+<template>
+  <view>
+    <nav-bar title="骨架屏"></nav-bar>
+    <view class="content">
+      基础用法
+      <skeleton :row="3" animate :loading="loading">
+        <view> content1 </view>
+      </skeleton>
+      显示 title
+      <skeleton :row="3" title animate :loading="loading">
+        <view> content2 </view>
+      </skeleton>
+      显示头像（上面)
+      <skeleton :avatar="avatarTop" :row="3" animate :loading="loading" style="margin-top: 24rpx">
+        <view> content3 </view>
+      </skeleton>
+      显示头像（左面）
+      <skeleton title :avatar="avatarLeft" :row="3" animate :loading="loading" style="margin-top: 24rpx">
+        <view> content4 </view>
+      </skeleton>
+      显示banner
+      <skeleton banner :row="0" animate :loading="loading" style="margin-top: 24rpx">
+        <view> content5 </view>
+      </skeleton>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: true, // 是否显示骨架屏组件
+      avatarTop: 'top',
+      avatarLeft: 'left',
+    };
+  },
+  onLoad() {
+    // 通过延时模拟向后端请求数据，调隐藏骨架屏
+    setTimeout(() => {
+      this.loading = false;
+    }, 3000);
+  },
+};
+</script>
diff --git a/src/package.json b/src/package.json
new file mode 100644
index 0000000..9464afd
--- /dev/null
+++ b/src/package.json
@@ -0,0 +1,12 @@
+{
+    "id": "ls-skeleton",
+    "name": "skeleton骨架屏（可随意配置骨架内容结构）",
+    "version": "1.0.0",
+    "description": "可随意配置骨架内容结构的骨架屏插件，自由度高，复用性强，扩展性强",
+    "keywords": [
+        "动画效果",
+        "VUE",
+        "NVUE",
+        "微信小程序"
+    ]
+}
\ No newline at end of file