★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > uni-app > 正文

uni-app自定义loading组件

 2020/10/26 13:46:09  字体:  浏览 444 我要评论

这个是uni-app自定义loading的组件,以下是代码



<template>
<!-- visible控制toast的显隐,text为提示文本 -->
<view class="loading-toast" v-if="visible">
<view class="toast-mask"></view>
<view class="toast-tip">{{text}}</view>
</view>
</template>

<script>
export default {
name: "loading-toast",
props: {
text: {
type: String,
default: "加载中..."
},
visible: {
type: Boolean,
default: false
}
}
}
</script>

<style>
.loading-toast {
min-width: 200upx;
min-height: 200upx;
max-width: 500upx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
font-size: 26upx;
color: #fff;
background: rgba(0, 0, 0, 0.7);
border-radius: 10upx;
}

.toast-mask {
width: 50upx;
height: 50upx;
border: 3px solid #fff;
border-radius: 50%;
margin: 0 6px;
display: inline-block;
vertical-align: middle;
clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 0% 40%);
animation: rotate 1s linear infinite;
margin-bottom: 36upx;
}

@-webkit-keyframes rotate {
from {
transform: rotatez(0deg);
}

to {
transform: rotatez(360deg);
}
}

@keyframes rotate {
from {
transform: rotatez(0deg);
}

to {
transform: rotatez(360deg);
}
}
</style>

相关阅读
( 2020/11/20 21:47:17 )asp无限级调用分类显示
( 2020/11/12 20:19:03 )Object.assign的一些用法
( 2020/11/5 13:32:29 )利用css中的scale()实现放大缩小效果
( 2020/10/26 21:09:19 )uni-app操作json数组
( 2020/10/26 13:46:09 )uni-app自定义loading组件
( 2020/10/1 17:07:20 )uni-app一个像商城分类中心一样的联动侧边栏导航分类
( 2020/9/27 16:09:39 )uni-app实现tab选项卡
( 2020/9/25 22:35:17 )uni-app的父与子页面传递参数之属性Props字段类型讲解
共有0条关于《uni-app自定义loading组件》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
uni-app操作json数组
uni-app一个像商城分类中心一样的联动侧边栏导航分类
uni-app实现tab选项卡
uni-app的父与子页面传递参数之属性Props字段类型讲解
uni-app判断当前客户端是安卓还是ios还是其它平台
uni-app基础知识事件传参(动态参数演示)
uni-app基础知识事件绑定 @click
uni-app基础知识页面事件与web事件的对比
更多>>最新添加文章
asp无限级调用分类显示
Object.assign的一些用法
利用css中的scale()实现放大缩小效果
uni-app操作json数组
uni-app一个像商城分类中心一样的联动侧边栏导航分类
uni-app实现tab选项卡
uni-app的父与子页面传递参数之属性Props字段类型讲解
uni-app判断当前客户端是安卓还是ios还是其它平台
更多>>随机抽取信息
利用JavaScript获取现在时间日期与农历
一个社区性的网站
JavaScript:iframe自动适应高度
深山网吧留言板系统v4.0
利用java控制图片的大小
几个经典的css技巧
ASP显示数据中小数的时候,小数点前面的0不显示的解决办法
另类的title提示文字