关注前端 | 前端博客
当前位置: uni-app > loading插件-uniApp

loading插件-uniApp

2019-05-26 分类:uni-app 作者:管理员 阅读(91)

常用的加载数据的状态模式有3种:
1.-----暂无数据-----
2.-----暂无更多-----
3.-----正在加载-----
引入此插件后只需在引用的组件里动态改变状态类型就可以动态显示不同的模式

插件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
    <!-- 加载列表数据状态容器 -->
    <view class="container">
        <!-- 没有数据 -->
        <view class="item" v-if="type===0">
            <view class="line"></view>
            <text class="tip">没有数据</text>
        </view>
        <!-- 暂无更多 -->
        <view class="item" v-else-if="type===1">
            <view class="line"></view>
            <text class="tip">暂无更多</text>
        </view>
        <!-- 正在加载中... -->
        <view class="item" v-else-if="type===2">
            <view class="center">
                <image
                    class="loading-icon" src="data:image/svg+xml;base64,IDxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB3aWR0aD0nMTIwJyBoZWlnaHQ9JzEyMCcgdmlld0JveD0nMCAwIDEwMCAxMDAnPjxwYXRoIGZpbGw9J25vbmUnIGQ9J00wIDBoMTAwdjEwMEgweicvPjxyZWN0IHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyB4PSc0Ni41JyB5PSc0MCcgZmlsbD0nI0U5RTlFOScgcng9JzUnIHJ5PSc1JyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgwIC0zMCknLz48cmVjdCB3aWR0aD0nNycgaGVpZ2h0PScyMCcgeD0nNDYuNScgeT0nNDAnIGZpbGw9JyM5ODk2OTcnIHJ4PSc1JyByeT0nNScgdHJhbnNmb3JtPSdyb3RhdGUoMzAgMTA1Ljk4IDY1KScvPjxyZWN0IHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyB4PSc0Ni41JyB5PSc0MCcgZmlsbD0nIzlCOTk5QScgcng9JzUnIHJ5PSc1JyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA3NS45OCA2NSknLz48cmVjdCB3aWR0aD0nNycgaGVpZ2h0PScyMCcgeD0nNDYuNScgeT0nNDAnIGZpbGw9JyNBM0ExQTInIHJ4PSc1JyByeT0nNScgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNjUgNjUpJy8+PHJlY3Qgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHg9JzQ2LjUnIHk9JzQwJyBmaWxsPScjQUJBOUFBJyByeD0nNScgcnk9JzUnIHRyYW5zZm9ybT0ncm90YXRlKDEyMCA1OC42NiA2NSknLz48cmVjdCB3aWR0aD0nNycgaGVpZ2h0PScyMCcgeD0nNDYuNScgeT0nNDAnIGZpbGw9JyNCMkIyQjInIHJ4PSc1JyByeT0nNScgdHJhbnNmb3JtPSdyb3RhdGUoMTUwIDU0LjAyIDY1KScvPjxyZWN0IHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyB4PSc0Ni41JyB5PSc0MCcgZmlsbD0nI0JBQjhCOScgcng9JzUnIHJ5PSc1JyB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNjUpJy8+PHJlY3Qgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHg9JzQ2LjUnIHk9JzQwJyBmaWxsPScjQzJDMEMxJyByeD0nNScgcnk9JzUnIHRyYW5zZm9ybT0ncm90YXRlKC0xNTAgNDUuOTggNjUpJy8+PHJlY3Qgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHg9JzQ2LjUnIHk9JzQwJyBmaWxsPScjQ0JDQkNCJyByeD0nNScgcnk9JzUnIHRyYW5zZm9ybT0ncm90YXRlKC0xMjAgNDEuMzQgNjUpJy8+PHJlY3Qgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHg9JzQ2LjUnIHk9JzQwJyBmaWxsPScjRDJEMkQyJyByeD0nNScgcnk9JzUnIHRyYW5zZm9ybT0ncm90YXRlKC05MCAzNSA2NSknLz48cmVjdCB3aWR0aD0nNycgaGVpZ2h0PScyMCcgeD0nNDYuNScgeT0nNDAnIGZpbGw9JyNEQURBREEnIHJ4PSc1JyByeT0nNScgdHJhbnNmb3JtPSdyb3RhdGUoLTYwIDI0LjAyIDY1KScvPjxyZWN0IHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyB4PSc0Ni41JyB5PSc0MCcgZmlsbD0nI0UyRTJFMicgcng9JzUnIHJ5PSc1JyB0cmFuc2Zvcm09J3JvdGF0ZSgtMzAgLTUuOTggNjUpJy8+PC9zdmc+"></image>
                <text class="loading-tip">正在加载中...</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            type:{
                type:Number,
                default:0
            }
        },
        data() {
            return {

            }
        },
        methods: {
           
        }
    }
</script>

<style>
    .container{
        width: 100%;
        height: 90upx;
    }
    .item{
        position:relative;
        height: 100%;
        width: 100%x;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .line{
        width: 50%;
        height: 41upx;
        border-top: 2upx solid #999;
       position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%,0);
    }
    .tip{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
       padding: 6upx 20upx;
    }
    .loading-tip,.tip{
        font-size: 28upx;
    }
    .loading-tip{
        margin-left: 10upx;
    }
    .tip{
        color: #999;
   }
    .center{
        display: flex;
        position: absolute;
    }
    .loading-icon{
        width: 40upx;
        height: 40upx;
        transition: .3s;
        animation: loading 1s steps(12) infinite;
    }
    @keyframes loading {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(1turn);
        }
    }
</style>

使用插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
    <view class="content">
        <loading :type="statusType"></loading>
        <button type="primary" @click="changeSatus">按钮</button>
    </view>
</template>
<script>
    import loading from '@/components/loading/index.vue'
    export default {
        components: {
            loading
        },
        data() {
            return {
                statusType:2
            }
        },
        onLoad() {

        },
        methods: {
            changeSatus(){
                this.statusType++
                this.statusType%=3
            }
        }
    }
</script>
<style>
    .content {
        text-align: center;
        height: 400upx;
    }
</style>

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
2

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - loading插件-uniApp

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线