feat(Skeleton): add new component skeleton (#2244)

example/app.json

@@ -113,7 +113,8 @@
     "van-grid": "./dist/grid/index",
     "van-grid-item": "./dist/grid-item/index",
     "van-dropdown-menu": "./dist/dropdown-menu/index",
-    "van-dropdown-item": "./dist/dropdown-item/index"
+    "van-dropdown-item": "./dist/dropdown-item/index",
+    "van-skeleton": "./dist/skeleton/index"
   },
   "sitemapLocation": "sitemap.json"
 }

example/config.js

@@ -137,6 +137,10 @@ export default [
         path: '/count-down',
         title: 'CountDown 倒计时'
       },
+      {
+        path: '/divider',
+        title: 'Divider 分割线'
+      },
       {
         path: '/notice-bar',
         title: 'NoticeBar 通告栏'
@@ -149,6 +153,10 @@ export default [
         path: '/progress',
         title: 'Progress 进度条'
       },
+      {
+        path: '/skeleton',
+        title: 'Skeleton 骨架屏'
+      },
       {
         path: '/steps',
         title: 'Steps 步骤条'
@@ -164,10 +172,6 @@ export default [
       {
         path: '/tree-select',
         title: 'TreeSelect 分类选择'
-      },
-      {
-        path: '/divider',
-        title: 'Divider 分割线'
       }
     ]
   },

example/pages/skeleton/index.js

@@ -0,0 +1,11 @@
+import Page from '../../common/page';
+
+Page({
+  data: {
+    show: false
+  },
+
+  onChange({ detail }) {
+    this.setData({ show: detail });
+  },
+});

example/pages/skeleton/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Skeleton 骨架屏"
+}

example/pages/skeleton/index.wxml

@@ -0,0 +1,37 @@
+<demo-block title="基础用法">
+  <van-skeleton
+    title
+    row="3"
+    row-width="{{ ['100%', '100%', '80%'] }}"
+  />
+</demo-block>
+
+<demo-block title="显示头像">
+  <van-skeleton
+    title
+    avatar
+    row="3"
+  />
+</demo-block>
+
+<demo-block title="展示子组件">
+  <van-switch
+    checked="{{ show }}"
+    size="24px"
+    bind:change="onChange"
+  />
+  <van-skeleton
+    title
+    avatar
+    row="3"
+    loading="{{ !show }}"
+  >
+    <view class="demo-preview">
+      <image class="demo-preview-img" src="https://img.yzcdn.cn/vant/logo.png" />
+      <view class="demo-content">
+        <view class="demo-content-h3">关于 Vant Weapp</view>
+        <view class="domo-content-p">Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。</view>
+      </view>
+    </view>
+  </van-skeleton>
+</demo-block>

example/pages/skeleton/index.wxss

@@ -0,0 +1,35 @@
+page {
+  background-color: white;
+}
+
+.van-switch {
+  margin: 0 16px 8px;
+}
+
+.demo-preview {
+  display: flex;
+  padding: 0 16px;
+}
+
+.demo-content {
+  padding-top: 6px;
+}
+
+.demo-content-h3 {
+  margin: 0;
+  font-size: 18px;
+  line-height: 20px;
+}
+
+.demo-content-p {
+  margin: 13px 0 0;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.demo-preview-img {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin-right: 16px;
+}

packages/common/style/var.less

@@ -456,3 +456,11 @@
 @dropdown-menu-title-padding: 0 @padding-xs;
 @dropdown-menu-title-line-height: 18px;
 @dropdown-menu-option-active-color: @blue;
+
+// skeleton
+@skeleton-padding: 0 @padding-md;
+@skeleton-row-height: 16px;
+@skeleton-row-background-color: @active-color;
+@skeleton-row-margin-top: @padding-sm;
+@skeleton-avatar-background-color: @active-color;
+@skeleton-animation-duration: 1.2s;

packages/skeleton/README.md

@@ -0,0 +1,66 @@
+# Skeleton
+
+### Install
+
+```json
+"usingComponents": {
+  "van-skeleton": "path/to/vant-weapp/dist/skeleton/index"
+}
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-skeleton title row="3" />
+```
+
+### Show Avatar
+
+```html
+<van-skeleton title avatar row="3" />
+```
+
+### Show Children
+
+```html
+<van-skeleton
+  title
+  avatar
+  row="3"
+  loading="loading"
+>
+  <div>Content</div>
+</van-skeleton>
+```
+
+```js
+Page({
+  data: {
+    loading: true
+  },
+
+  onChange() {
+    this.setData({
+      loading: false
+    });
+  }
+});
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default | Version |
+|------|------|------|------|------|
+| row | Row count | *number* | `0` | - |
+| row-width | Row width, can be array | *string \| string[]* | `100%` | - |
+| title | Whether to show title placeholder | *boolean* | `false` | - |
+| title-width | Title width | string | `40%` | - |
+| avatar | Whether to show avatar placeholder | *boolean* | `false` | - |
+| avatar-size | Size of avatar placeholder | string | `32px` | - |
+| avatar-shape | Shape of avatar placeholder，can be set to `square` | *string* | `round` | - |
+| loading | Whether to show skeleton，pass `false` to show child component | *boolean* | `true` | - |
+| animate | Whether to enable animation | *boolean* | `true` | - |

packages/skeleton/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

packages/skeleton/index.less

@@ -0,0 +1,57 @@
+@import '../common/style/var.less';
+@import '../common/style/theme.less';
+
+.van-skeleton {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  .theme(padding, '@skeleton-padding');
+
+  &__avatar {
+    flex-shrink: 0;
+    .theme(margin-right, '@padding-md');
+    .theme(background-color, '@skeleton-avatar-background-color');
+
+    &--round {
+      border-radius: 100%;
+    }
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__avatar + &__content {
+    .theme(padding-top, '@padding-xs');
+  }
+
+  &__row,
+  &__title {
+    .theme(height, '@skeleton-row-height');
+    .theme(background-color, '@skeleton-row-background-color');
+  }
+
+  &__title {
+    margin: 0;
+  }
+
+  &__row {
+    &:not(:first-child) {
+      .theme(margin-top, '@skeleton-row-margin-top');
+    }
+  }
+
+  &__title + &__row {
+    margin-top: 20px;
+  }
+
+  &--animate {
+    animation: van-skeleton-blink @skeleton-animation-duration ease-in-out infinite;
+  }
+}
+
+@keyframes van-skeleton-blink {
+  50% {
+    opacity: .6;
+  }
+}

packages/skeleton/index.ts

@@ -0,0 +1,43 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  props: {
+    row: {
+      type: Number,
+      value: 0
+    },
+    title: Boolean,
+    avatar: Boolean,
+    loading: {
+      type: Boolean,
+      value: true
+    },
+    animate: {
+      type: Boolean,
+      value: true
+    },
+    avatarSize: {
+      type: String,
+      value: '32px'
+    },
+    avatarShape: {
+      type: String,
+      value: 'round'
+    },
+    titleWidth: {
+      type: String,
+      value: '40%'
+    },
+    rowWidth: {
+      type: null,
+      value: '100%',
+      observer(val) {
+        this.setData({ isArray: val instanceof Array });
+      }
+    }
+  },
+
+  data: {
+    isArray: false
+  }
+});

packages/skeleton/index.wxml

@@ -0,0 +1,28 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  wx:if="{{ loading }}"
+  class="custom-class {{ utils.bem('skeleton', [{animate}]) }}"
+>
+  <view
+    wx:if="{{ avatar }}"
+    class="{{ utils.bem('skeleton__avatar', [avatarShape])}}"
+    style="{{ 'width:' + avatarSize + ';height:' + avatarSize }}"
+  />
+  <view class="{{ utils.bem('skeleton__content')}}">
+    <view
+      wx:if="{{ title }}"
+      class="{{ utils.bem('skeleton__title') }}"
+      style="{{ 'width:' + titleWidth }}"
+    />
+    <view
+      wx:for="row"
+      wx:for-index="index"
+      class="{{ utils.bem('skeleton__row') }}"
+      style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) }}"
+    />
+  </view>
+</view>
+<view wx:else class="{{ utils.bem('skeleton__content')}}">
+  <slot />
+</view>