uniapp 自定义加载组件,全屏加载,局部加载 （微信小程序）

效果图

全屏加载  页面加载使用

局部加载   列表加载里面使用

使用gif

html 

<template>
<view>
<view class="" v-if="type=='FullScreen'">
<view class="loading" v-if="show">
<view class="">
<image class="loadingicon"
src="../../static/all/loading.gif"
mode="aspectFit"></image>
<view style="color:#999;width: 100%;">加载中</view>
</view>
</view>
</view>
<view class="" v-if="type=='adaptive'">
<view class="loading_adaptive" v-if="show">
<view class="">
<image class="loadingicon"
src="../../static/all/loading.gif"
mode="aspectFit"></image>
<view style="color:#999;width: 100%;">加载中</view>
</view>
</view>
</view>
</view>
</template>

css

.loading {
width: 100vw;
height: 100vh;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 999999;
text-align: center;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;

.loadingicon {
width: 100rpx;
height: 100rpx;
}
}

.loading_adaptive {
width: 100%;
height: 500rpx;
z-index: 999999;
text-align: center;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;

.loadingicon {
width: 100rpx;
height: 100rpx;
}
}

js

export default {
name: "loading",
data() {
return {

};
},
props: {
show: {
default: false,
type: Boolean
},
type: {
default: 'FullScreen', //全屏使用或者自适应使用
type: String
}
},
watch: {
show: {
handler(newData, oldData) {
console.log(newData, '新值');
console.log(oldData, '老值');
},
immediate: true,
deep: true
}
}
}

挂载全局或页面引入使用

需要放在最外层view

<loading :show="loadingshow"></loading>

js

loadingshow: true,



//在生命周期 例如：onload 或者 接口请求里面使用
//时间可以自定义
//第一种方式在生命周期中使用：
setTimeout(() => {
that.loadingshow = false;
}, 200)

//第二种方式在接口里面使用：
            需要展示数据的接口({
page: this.page,
limit: this.limit
}).then(ress => {
                //数据请求完毕再关闭加载
if(res.code==1){
                that.loadingshow = false;
                }
})

原文地址：https://blog.csdn.net/zjqjy0911/article/details/143804320

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！