Style(店铺):界面调整

components/GooSkeleton/README.md

@@ -0,0 +1,62 @@
+# skeleton
+uni-app 骨架屏组件，用于数据加载时显示占位元素
+
+## 属性说明
+
+|属性名|类型|默认值|说明|
+| -- | -- | --|--|
+| loading | Boolean | true | 是否显示占位图 |
+| showAvatar | Boolean | true | 是否显示头像占位图 |
+| AvatarSize | String | 50px | 头像站占位图大小 |
+| AvatarShape | String | round | 头像形状，可选值：round, square |
+| showTitle | Boolean | true | 是否显示标题占位图 |
+| titleWidth | String | 40% | 标题占位图宽度 |
+| row | Number|  3 | 段落占位图行数 |
+| animate | Boolean | true | 是否开启动画 |
+
+## 使用示例
+
+```html
+<skeleton
+  :loading="loading"
+  :avatarSize="skeleton1.avatarSize"
+  :row="skeleton1.row"
+  :showTitle="skeleton1.showTitle"
+>
+  <view class="section-content">我是段落1</view>
+</skeleton>
+```
+
+```javascript
+import Skeleton from '../components/skeleton/index.vue'
+export default {
+  components: {
+    Skeleton
+  },
+  data() {
+    return {
+      loading: true,
+      skeleton1 : {
+        avatarSize: '52px',
+        row: 3,
+        showTitle: true,
+      }
+    }
+  },
+  created() {
+    this.reloadData()
+  },
+  methods: {
+    reloadData() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 3000)
+    },
+  },
+}
+```
+
+## 效果图
+
+![](http://images.alisali.cn/img_20191014113211.png)

components/GooSkeleton/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <view>
+    <view
+      v-if="loading"
+      :class="{ animate: animate }"
+      class="skeleton"
+    >
+      <view
+        v-if="showAvatar"
+        :class="[avatarShape]"
+        :style="{ width: avatarSize, height: avatarSize }"
+        class="skeleton-avatar"
+      />
+      <view class="skeleton-content">
+        <view
+          v-if="showTitle"
+          :style="{ width: titleWidth }"
+          class="skeleton-title"
+        />
+        <view class="skeleton-rows">
+          <view
+            v-for="(item, index) in rowList"
+            :key="index"
+            :style="{ width: item.width }"
+            class="skeleton-row-item"
+          />
+        </view>
+      </view>
+    </view>
+    <view v-else>
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script>
+const DEFAULT_ROW_WIDTH = '100%'
+const DEFAULT_LAST_ROW_WIDTH = '70%'
+
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      default: true
+    },
+    showAvatar: {
+      type: Boolean,
+      default: true
+    },
+    avatarSize: {
+      type: String,
+      default: '50px'
+    },
+    avatarShape: {
+      type: String,
+      default: 'round' // square | round
+    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    titleWidth: {
+      type: String,
+      default: '40%'
+    },
+    row: {
+      type: Number,
+      default: 3
+    },
+    animate: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    rowList() {
+      const list = []
+      for (let i = 0; i < this.row; i++) {
+        list.push({
+          width: i === this.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH
+        })
+      }
+      return list
+    }
+  }
+}
+</script>
+
+<style scoped>
+.skeleton {
+  display: flex;
+  padding: 16px;
+  --bg-color: #f2f3f5;
+  --row-height: 16px;
+  --row-margin-top: 16px;
+}
+.skeleton-avatar {
+  flex-shrink: 0;
+  background: var(--bg-color);
+  margin-right: 8px;
+}
+.skeleton-avatar.round {
+  border-radius: 50%;
+}
+
+.skeleton-content {
+  width: 100%;
+}
+
+.skeleton-title {
+  background-color: var(--bg-color);
+  height: var(--row-height);
+}
+
+.skeleton-title + .skeleton-rows {
+  margin-top: var(--row-margin-top);
+}
+
+.skeleton-row-item {
+  background-color: var(--bg-color);
+  height: var(--row-height);
+}
+.skeleton-row-item:not(:first-child) {
+  margin-top: var(--row-margin-top);
+}
+
+.skeleton.animate {
+  animation: skeleton-blink 1.2s ease-in-out infinite;
+}
+
+@keyframes skeleton-blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>