提交 5959978f 编写于 作者: I iotjin

添加loading组件

上级 d157e0be
//Toast组件 - loading
/*
引用:
"Toast": "./components/toast/index",
xml
<Toast isShowLoading="{{true}}"></Toast>
<Toast isShowLoading="{{true}}" forbidClick="{{true}}"></Toast>
js
data: {
isShowLoading: false
},
showLoading() {
this.setData({
isShowLoading: true
})
},
hideLoading() {
this.setData({
isShowLoading: false
})
},
var that = this
this.showLoading()
that.hideLoading()
*/
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
isShowLoading: { // 是否显示Loading
type: Boolean,
value: false
},
forbidClick: { //是否禁止背景点击,默认false, 为true点击事件无法穿透
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {},
lifetimes: {
attached: function () {
// console.log(this.properties.isShowLoading);
// console.log(this.properties.forbidClick);
},
detached: function () {}
},
/**
* 组件的方法列表
*/
methods: {
showLoading() {
this.setData({
isShowLoading: true
})
},
hideLoading() {
this.setData({
isShowLoading: false
})
}
}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<view class="loading-bg" wx:if="{{forbidClick && isShowLoading}}">
<view class='loading-view'>
<image src='../../images/logo.png' class='icon' mode='aspectFit'></image>
<view class='text'>加载中...</view>
</view>
</view>
<view class='loading-view' style="box-shadow: 0 0 0rpx 2000rpx rgba(0, 0, 0, 0.5);"
wx:if="{{!forbidClick && isShowLoading}}">
<image src='../../images/logo.png' class='icon' mode='aspectFit'></image>
<view class='text'>加载中...</view>
</view>
\ No newline at end of file
.loading-bg {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 99999;
}
.loading-view {
position: fixed;
top: 0;
right: 0;
bottom: 140rpx;
left: 0;
margin: auto;
width: 260rpx;
height: 260rpx;
border-radius: 10rpx;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-size: 28rpx;
z-index: 9999;
line-height: 2.4em;
background-color: white;
}
.loading-view::after {
content: "";
position: absolute;
background-color: white;
border-radius: 50%;
width: 200rpx;
height: 200rpx;
font-size: 10px;
border-top: 6rpx solid rgba(0, 0, 0, 0.05);
border-right: 6rpx solid rgba(0, 0, 0, 0.05);
border-bottom: 6rpx solid rgba(0, 0, 0, 0.05);
animation: cuIcon-spin 1s infinite linear;
z-index: -1;
border-left: 6rpx solid #f37b1d;
}
.icon {
width: 70rpx;
height: 70rpx;
}
.text {
color: black;
}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册