blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

[refactor] Loading 组件升级 (#178)

Browse Source 
* refactor: loading

* fix: modify api
This commit is contained in:
刘建东 2018-04-15 11:25:26 +08:00 committed by Yao
parent dc673c25da
commit 1164d312f6
11 changed files with 280 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/app.json
View File

@ -12,6 +12,7 @@
"pages/helper/index",
"pages/icon/index",
"pages/layout/index",
"pages/loading/index",
"pages/noticebar/index",
"pages/panel/index",
"pages/popup/index",

3
example/pages/dashboard/config.js
View File

@ -26,6 +26,9 @@ export default {
}, {
name: 'Layout 布局',
path: '/pages/layout/index'
}, {
name: 'loading 加载',
path: '/pages/loading/index'
}, {
name: 'Noticebar 通告栏',
path: '/pages/noticebar/index'

1
example/pages/loading/index.js Normal file
View File

@ -0,0 +1 @@
Page({})

6
example/pages/loading/index.json Normal file
View File

@ -0,0 +1,6 @@
{
"navigationBarTitleText": "loading 加载",
"usingComponents": {
"zan-loading": "../../dist/loading/index"
}
}

21
example/pages/loading/index.wxml Normal file
View File

@ -0,0 +1,21 @@
<view class="container">
<view class="doc-title zan-hairline--bottom">LOADING</view>
<view class="zan-panel-title">circle</view>
<view class="loading-example zan-panel">
<zan-loading type="circle"></zan-loading>
<zan-loading type="circle" color="black"></zan-loading>
</view>
<view class="zan-panel-title">spinner</view>
<view class="loading-example zan-panel">
<zan-loading type="spinner"></zan-loading>
<zan-loading type="spinner" color="black"></zan-loading>
</view>
<view class="zan-panel-title">dot</view>
<view class="zan-panel loading-example no-flex">
<zan-loading type="dot"></zan-loading>
<zan-loading type="dot" color="black"></zan-loading>
</view>
</view>

14
example/pages/loading/index.wxss Normal file
View File

@ -0,0 +1,14 @@
.container {
background: #f0f0f0;
}
.loading-example {
display: flex;
flex-direction: row;
background: transparent;
}
.loading-example zan-loading {
flex: 1;
}
.no-flex {
display: block;
}

27
packages/loading/README.md Normal file
View File

@ -0,0 +1,27 @@
## Loading 加载
### 属性
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
| ------- | --------------- | -------- | ----- | ----------------- |
| type | String | 否 | circle | loading 类型，可支持 circle，spinner，dot |
| color | String | 否 | 无 | 可选值 black |
| use | String，Number | 否 | 1 | 选择每种 Loading 类型的样式 |
### 代码演示
```json
{
...
"usingComponents": {
"zan-loading": "../../dist/loading/index"
}
...
}
```
```html
<zan-loading type="circle"></zan-loading>
<zan-loading type="spinner" color="black"></zan-loading>
<zan-loading type="dot"></zan-loading>
```

11
packages/loading/index.js Normal file
View File

@ -0,0 +1,11 @@
Component({
properties: {
type: {
type: String,
value: 'circle'
},
color: {
type: String
}
}
})

3
packages/loading/index.json Normal file
View File

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

175
packages/loading/index.pcss Normal file
View File

@ -0,0 +1,175 @@
$spinners: 12;
.loading.inline {
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;
}
& .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;
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;
&::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));
}
}
}
}
&.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;
}
}
}
}
&.black .dot-spinner view {
background: #c9c9c9;
}
}
@keyframes dot-spinner {
40% {
left: calc(50% - 15px);
}
60% {
left: calc(50% - 15px);
}
100% {
left: 100%;
}
}
@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)
}
}

18
packages/loading/index.wxml Normal file
View File

@ -0,0 +1,18 @@
<view class="loading {{color}} {{type === 'dot' ? 'block' : 'inline'}}">
<view wx:if="{{type === 'circle'}}" class="circle"></view>
<view wx:if="{{type === 'circular'}}" class="circular"></view>
<view wx:if="{{type === 'spinner' || type === 'dot'}}" class="{{ type === 'dot' ? 'dot-spinner' : 'spinner'}}">
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
</view>
</view>