add Spin

src/code/spin.js

@@ -0,0 +1,84 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-spin": "../../dist/spin/index"
+}
+`;
+code.usage = `
+三种尺寸
+
+<i-grid>
+    <i-grid-item i-class="item">
+        <i-spin size="small"></i-spin>
+    </i-grid-item>
+    <i-grid-item i-class="item">
+        <i-spin></i-spin>
+    </i-grid-item>
+    <i-grid-item i-class="item">
+        <i-spin size="large"></i-spin>
+    </i-grid-item>
+</i-grid>
+
+居中固定
+
+<view class="container">
+    <i-spin fix></i-spin>
+</view>
+
+自定义内容
+
+<i-grid>
+    <i-grid-item i-class="item">
+        <i-spin custom>加载中...</i-spin>
+    </i-grid-item>
+    <i-grid-item i-class="item">
+        <i-spin custom>
+            <i-icon type="refresh" size="20" i-class="icon-load"></i-icon>
+            <view>Loading</view>
+        </i-spin>
+    </i-grid-item>
+    <i-grid-item i-class="item">
+        <i-spin custom>
+            <view class="loading"></view>
+        </i-spin>
+    </i-grid-item>
+</i-grid>
+
+切换显示状态
+
+<view class="spin-article">
+    <view class="title">登金陵凤凰台</view>
+    <view class="name">李白</view>
+    <view class="article">
+        <view>凤凰台上凤凰游，凤去台空江自流。</view>
+        <view>吴宫花草埋幽径，晋代衣冠成古丘。</view>
+        <view>三山半落青天外，二水中分白鹭洲。</view>
+        <view>总为浮云能蔽日，长安不见使人愁。</view>
+    </view>
+
+    <i-spin size="large" fix wx:if="{{ spinShow }}"></i-spin>
+</view>
+
+<view class="switch">
+    <i-switch value="{{ switch }}" bindchange="onSwitchChange"></i-switch>
+</view>
+`;
+
+code.js = `
+Page({
+    data: {
+        spinShow: true,
+        switch: false
+    },
+    onSwitchChange ({ detail }) {
+        const value = detail.value;
+        this.setData({
+            switch: value,
+            spinShow: !value
+        });
+    }
+});
+`;
+
+export default code;

src/router.js

@@ -149,6 +149,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/message.vue'], resolve)
     },
+    {
+        path: '/components/spin',
+        meta: {
+            title: '加载中 Spin'
+        },
+        component: (resolve) => require(['./views/components/spin.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'

src/views/components/spin.vue

@@ -0,0 +1,79 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Spin 加载中</h1>
+            <Anchor title="概述" h2></Anchor>
+            <p>当区块正在获取数据中时可使用，适当的等待动画可以提升用户体验。</p>
+            <Anchor title="使用指南" h2></Anchor>
+            <p>在 .json 中引入组件</p>
+            <i-code bg lang="json">{{ code.import }}</i-code>
+            <Anchor title="示例" h2></Anchor>
+            <i-code bg lang="html">{{ code.usage }}</i-code>
+            <br><br>
+            <i-code bg lang="js">{{ code.js }}</i-code>
+            <ad></ad>
+
+            <div class="api">
+                <Anchor title="API" h2></Anchor>
+                <Anchor title="Spin properties" h3></Anchor>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>属性</th>
+                            <th>说明</th>
+                            <th>类型</th>
+                            <th>默认值</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>i-class</td>
+                            <td>自定义 class 类名</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>size</td>
+                            <td>大小，可选值为 large、small、default</td>
+                            <td>String</td>
+                            <td>default</td>
+                        </tr>
+                        <tr>
+                            <td>fix</td>
+                            <td>是否固定，需要父级有 relative 或 absolute</td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                        </tr>
+                        <tr>
+                            <td>custom</td>
+                            <td>是否自定义加载中的样式</td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </article>
+    </i-article>
+</template>
+<script>
+    import iArticle from '../../components/article.vue';
+    import iCode from 'iCode';
+    import Demo from '../../components/demo.vue';
+    import Code from '../../code/spin';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>