diff --git a/example/pages/button/index.wxml b/example/pages/button/index.wxml
index ff534549..91b4beb2 100644
--- a/example/pages/button/index.wxml
+++ b/example/pages/button/index.wxml
@@ -23,7 +23,7 @@
-
-
+
+
diff --git a/example/pages/button/index.wxss b/example/pages/button/index.wxss
index e69de29b..9e6c7345 100644
--- a/example/pages/button/index.wxss
+++ b/example/pages/button/index.wxss
@@ -0,0 +1,3 @@
+.loading {
+ margin: 0 18px;
+}
diff --git a/example/pages/loading/index.json b/example/pages/loading/index.json
index 4d84ebcd..8afd6d98 100644
--- a/example/pages/loading/index.json
+++ b/example/pages/loading/index.json
@@ -1,6 +1,7 @@
{
- "navigationBarTitleText": "loading 加载",
+ "navigationBarTitleText": "Loading 加载",
"usingComponents": {
+ "demo-block": "../../components/demo-block/index",
"van-loading": "../../dist/loading/index"
}
-}
\ No newline at end of file
+}
diff --git a/example/pages/loading/index.wxml b/example/pages/loading/index.wxml
index 12558109..4ebf7b18 100644
--- a/example/pages/loading/index.wxml
+++ b/example/pages/loading/index.wxml
@@ -1,19 +1,9 @@
-
+
+
+
+
- circle
-
-
-
-
- spinner
-
-
-
-
- dot
-
-
-
-
-
-
+
+
+
+
diff --git a/example/pages/loading/index.wxss b/example/pages/loading/index.wxss
index 269e324a..3fdb6930 100644
--- a/example/pages/loading/index.wxss
+++ b/example/pages/loading/index.wxss
@@ -1,14 +1,9 @@
-.container {
- background: #f0f0f0;
+.loading {
+ margin-right: 20px;
}
-.loading-example {
- display: flex;
- flex-direction: row;
- background: transparent;
+
+.shadow {
+ padding: 10px;
+ border-radius: 3px;
+ background-color: rgba(0, 0, 0, .5);
}
-.loading-example van-loading {
- flex: 1;
-}
-.no-flex {
- display: block;
-}
\ No newline at end of file
diff --git a/packages/button/README.md b/packages/button/README.md
index eeaf7617..0b66b1a2 100644
--- a/packages/button/README.md
+++ b/packages/button/README.md
@@ -72,6 +72,13 @@
| send-message-img | sendMessageImg | `String` | 截图 |
| show-message-card | 显示会话内消息卡片 | `String` | `false` |
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+| loading-class | 加载图标样式类 |
+
### 事件
| 事件名 | 说明 | 参数 |
diff --git a/packages/button/index.js b/packages/button/index.js
index 5e0ed6f5..62dca894 100644
--- a/packages/button/index.js
+++ b/packages/button/index.js
@@ -6,7 +6,10 @@ const observer = function () {
};
Component({
- externalClasses: ['custom-class'],
+ externalClasses: [
+ 'custom-class',
+ 'loading-class'
+ ],
behaviors: [nativeBehaviors],
diff --git a/packages/button/index.pcss b/packages/button/index.pcss
index 853d3eb1..18c1b30d 100644
--- a/packages/button/index.pcss
+++ b/packages/button/index.pcss
@@ -4,8 +4,8 @@
position: relative;
padding: 0;
display: inline-block;
- height: 45px;
- line-height: 43px;
+ height: 44px;
+ line-height: 42px;
border-radius: 3px;
box-sizing: border-box;
font-size: 16px;
diff --git a/packages/button/index.wxml b/packages/button/index.wxml
index 8c6813c6..f77ea3b5 100644
--- a/packages/button/index.wxml
+++ b/packages/button/index.wxml
@@ -20,6 +20,11 @@
binderror="binderror"
bindopensetting="bindopensetting"
>
-
+
diff --git a/packages/loading/README.md b/packages/loading/README.md
index 7feada44..69267ea7 100644
--- a/packages/loading/README.md
+++ b/packages/loading/README.md
@@ -1,25 +1,40 @@
## Loading 加载
### 使用指南
+
在 index.json 中引入组件
```json
- {
- "usingComponents": {
- "van-loading": "path/to/vant-weapp/dist/loading/index"
- }
- }
+"usingComponents": {
+ "van-loading": "path/to/vant-weapp/dist/loading/index"
+}
```
-在页面上直接使用 van-loading 标签即可
+### 代码演示
+
+#### Circular
+
```html
-
-
-
+
+
```
-### 具体参数
-| 名称 | 类型 | 是否必须 | 默认 | 描述 |
-| ------- | --------------- | -------- | ----- | ----------------- |
-| type | String | 否 | circle | loading 类型，可支持 circle，spinner，dot |
-| color | String | 否 | 无 | 可选值 black |
-| use | String，Number | 否 | 1 | 选择每种 Loading 类型的样式 |
+#### Spinner
+
+```html
+
+
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| color | 颜色 | `String` | `#c9c9c9` |
+| type | 类型，可选值为 `spinner` | `String` | `circular` |
+| size | 大小 | `String` | `30px` |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
diff --git a/packages/loading/index.js b/packages/loading/index.js
index fa40a9f1..5ab0a49a 100644
--- a/packages/loading/index.js
+++ b/packages/loading/index.js
@@ -1,11 +1,18 @@
Component({
+ externalClasses: ['custom-class'],
+
properties: {
+ size: {
+ type: String,
+ value: '30px'
+ },
type: {
type: String,
- value: 'circle'
+ value: 'circular'
},
color: {
- type: String
+ type: String,
+ value: '#c9c9c9'
}
}
});
diff --git a/packages/loading/index.pcss b/packages/loading/index.pcss
index b3ec5f78..ac61a616 100644
--- a/packages/loading/index.pcss
+++ b/packages/loading/index.pcss
@@ -1,175 +1,66 @@
-$spinners: 12;
+@import '../common/var.pcss';
-.loading.inline {
+.van-loading {
+ z-index: 0;
+ font-size: 0;
+ line-height: 0;
position: relative;
- margin: 15px;
- text-align: center;
- display: flex;
- justify-content: center;
-
- & .circle {
- display: inline-block;
- height: 24px;
- width: 24px;
- border-radius: 100%;
- border: 3px solid transparent;
- box-sizing: border-box;
- border-color: rgba(0, 0, 0, .1);
- border-top-color: rgba(255, 255, 255, .7);
- animation: loading 1s linear infinite;
- }
- &.black .circle {
- border-color: #c9c9c9;
- border-top-color: #666;
- }
+ display: inline-block;
+ vertical-align: middle;
- & .circular {
- display: inline-block;
- height: 24px;
- width: 24px;
- animation: loading 2s linear infinite;
-
- &::after {
- content: '';
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 100%;
- border: 3px solid transparent;
- box-sizing: border-box;
- animation: circular 2s ease infinite;
- }
- }
-
- & .spinner {
- width: 30px;
- height: 30px;
- display: inline-block;
+ &__spinner {
+ z-index: -1;
+ width: 100%;
+ height: 100%;
position: relative;
- animation: loading 1s linear infinite;
- animation-timing-function: steps(12);
- & view {
- width: 100%;
- height: 100%;
- position: absolute;
- text-align: center;
- top: 0;
- left: 0;
+ display: inline-block;
+ box-sizing: border-box;
+ animation: van-rotate 0.8s linear infinite;
- &::after {
- content: '';
- background: #fff;
- height: 25%;
- display: block;
- width: 2px;
- border-radius: 2px;
- margin: 0 auto;
- }
-
- @for $i from 1 to $spinners {
- &:nth-child($i) {
- transform: rotate(calc($i * 30)deg);
- opacity: calc(1 / ($spinners + 2) * ($spinners - $i));
- }
- }
+ &--spinner {
+ animation-timing-function: steps(12);
}
- }
- &.black .spinner view::after {
- content: '';
- background: #c9c9c9;
- height: 25%;
- display: block;
- width: 2px;
- border-radius: 2px;
- margin: 0 auto;
- }
-}
-.loading.block {
- & .dot-spinner {
- margin: 15px 15px;
- overflow: hidden;
-
- & view {
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background: #fff;
- display: inline-block;
- margin-left: 3px;
- position: relative;
- left: 0;
-
- animation: dot-spinner 2s ease infinite;
- @for $i from 1 to 6 {
- &:nth-child($i) {
- animation-delay: calc((6 - $i)/10)s;
- }
- }
- @for $i from 6 to $spinners {
- &:nth-child($i) {
- display: none;
- }
- }
+ &--circular {
+ border: 1px solid;
+ border-radius: 100%;
+ border-color: currentColor;
+ border-top-color: transparent;
}
}
- &.black .dot-spinner view {
- background: #c9c9c9;
+ &__dot {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+
+ &::before {
+ width: 2px;
+ height: 25%;
+ content: ' ';
+ display: block;
+ margin: 0 auto;
+ border-radius: 40%;
+ background-color: currentColor;
+ }
}
}
-
-@keyframes dot-spinner {
- 40% {
- left: calc(50% - 15px);
+@keyframes van-rotate {
+ from {
+ transform: rotate(0deg);
}
- 60% {
- left: calc(50% - 15px);
- }
-
- 100% {
- left: 100%;
+ to {
+ transform: rotate(360deg);
}
}
-@keyframes circular {
- 0% {
- border-color: #fff;
- }
- 12% {
- border-top-color: transparent;
- }
- 25% {
- border-right-color: transparent;
- }
- 37% {
- border-bottom-color: transparent;
- }
- 50% {
- border-left-color: transparent;
- }
- 64% {
- border-top-color: #fff
- }
- 75% {
- border-right-color: #fff;
- }
- 87.5% {
- border-bottom-color: #fff;
- }
- 100% {
- border-color: #fff;
- }
-}
-
-@keyframes loading {
- 0% {
- transform: rotate(0deg)
- }
-
- 100% {
- transform: rotate(360deg)
+@for $i from 1 to 12 {
+ .van-loading__dot:nth-of-type($i) {
+ opacity: calc(1 - (0.75 / 12) * ($i - 1));
+ transform: rotate(calc($i * 30deg));
}
}
diff --git a/packages/loading/index.wxml b/packages/loading/index.wxml
index 641501ff..0ee145fc 100644
--- a/packages/loading/index.wxml
+++ b/packages/loading/index.wxml
@@ -1,18 +1,16 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
\ No newline at end of file
+