前言：
小程序中实现一个全局的loadding效果，也可以根据具体的组件大小来调整他的高度。
实现效果：
1、整个页面
2、局部组件大小
实现步骤：
1、 app.js中全局定义字段
App({
globalData: {
loadingImg:'https://xxxxxx/loading/loading.gif',//你的loadding图片地址
}
})2、components中建立loadding的文件信息，load为文件夹
load/index.wxml
<view class="load-bg" style="{{'background-color:'+backgroundColor+';top:'+loaddingTop}}">
<view class="load">
<view class="load-box">
<image class="load-box-img" src="{{loadingImg}}"></image>
</view>
</view>
</view>load/index.wxss
.load-bg{
position: fixed;
left:0;
top:0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 9999;
}
.load{
position: fixed;
top: 50%;
margin-top: -40rpx;
width: 100%;
}
.load-box{
height: 80rpx;
/* margin: 0 112rpx; */
text-align: center;
}
.load-box .load-box-img{
width: 80rpx;
height: 80rpx;
}load/index.js
// components/load/index.js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
loadinTime:{
type:Number,
value:0
},
//自定义loadding的top,这里是控制整个覆盖还是局部覆盖的核心
loaddingTop:{
type:Number | String,
value:0
}
},
/**
* 组件的初始数据
*/
data: {
loadingImg:'',
backgroundColor:'',
},
lifetimes: {
created() {},
attached() {},
ready() {
this.setData({
loadingImg:app.globalData.loadingImg,
backgroundColor:app.globalData.loadingBackgroundColor,
})
console.log('loading')
},
},
/**
* 组件的方法列表
*/
methods: {}
})
load/index.json
{
"component": true,
"usingComponents": {}
}3、页面上具体使用：带自定义切换的页面
首页： index文件夹
index/index.wxml
<loading wx:if="{{loadingFlag}}" />index/index.js
data:{
loadingFlag:true,
}
onLoad(options) {
//关闭自定义tab切换
this.getTabBar().setData({
tabBarShow:false,
})
}
//打开loadding
this.setData({
loadingFlag:true
})
//关闭loadding 并 打开自定义tab切换
this.setData({
loadingFlag:false
})
this.getTabBar().setData({
tabBarShow:true,
})index/index.json
{
"disableScroll": true,
"usingComponents": {
"loading":"../../components/load/index"
}
}4、页面上具体使用：普通页面全局
cart 文件夹
cart/index.wxml
<loading wx:if="{{loadingFlag}}" />cart/index.js
//打开loadding
this.setData({
loadingFlag:true
})
//关闭loadding
this.setData({
loadingFlag:false
})cart/index.json
"usingComponents": {
"loading":"../../components/load/index"
}5、页面上具体使用：局部页面的loadding效果
wxml文章来源地址https://www.toymoban.com/news/detail-496643.html
<loading wx:if="{{loadingFlag}}" loaddingTop="{{loaddingTop}}"/>js
data: {
loadingFlag:true,
loaddingTop:'88rpx'
},6、弹框上具体使用文章来源：https://www.toymoban.com/news/detail-496643.html
wxml
<popup
show="{{ show }}"
>
<view slot="content" class="title-contant">
<loading wx:if="{{loadingFlag}}"/>
</view>
</popup>
到了这里，关于小程序实现一个全局的loadding效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
