常用的加载数据的状态模式有3种:
1.-----暂无数据-----
2.-----暂无更多-----
3.-----正在加载-----
引入此插件后只需在引用的组件里动态改变状态类型就可以动态显示不同的模式
插件代码
<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>
使用插件
<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>
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - loading插件-uniApp