第一次提交
This commit is contained in:
@fawn-nine
2
uni_modules/z-loading/changelog.md
Normal file
2
uni_modules/z-loading/changelog.md
Normal file
@@ -0,0 +1,2 @@
|
||||
## 1.0.0（2021-05-12）
|
||||
1. 支持uni_modules
|
||||
113
uni_modules/z-loading/components/z-loading/z-loading.vue
Normal file
113
uni_modules/z-loading/components/z-loading/z-loading.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view class="mask mask-show" v-if="loadingShow" @touchmove.stop.prevent="preventTouchMove">
|
||||
<!-- 加载动画开始 -->
|
||||
<view class="preloader">
|
||||
<view class="loader"></view>
|
||||
</view>
|
||||
<!-- 加载动画结束 -->
|
||||
<view class="title">加载中...</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script scoped="true">
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
export default {
|
||||
computed: {
|
||||
...mapState(['loadingShow'])
|
||||
},
|
||||
methods:{
|
||||
preventTouchMove(){
|
||||
console.log('stop user scroll it!');
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mask {
|
||||
/* pointer-events: none; */
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.mask.mask-show {
|
||||
background: rgba(255,255,255, 0.3);
|
||||
}
|
||||
.title {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: block;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid transparent;
|
||||
border-top-color: #54a966;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
.loader::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 5rpx;
|
||||
right: 5rpx;
|
||||
bottom: 5rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid transparent;
|
||||
border-top-color: #5aa9ac;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
.loader::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15rpx;
|
||||
left: 15rpx;
|
||||
right: 15rpx;
|
||||
bottom: 15rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid transparent;
|
||||
border-top-color: #c4e3ae;
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
78
uni_modules/z-loading/package.json
Normal file
78
uni_modules/z-loading/package.json
Normal file
@@ -0,0 +1,78 @@
|
||||
{
|
||||
"id": "z-loading",
|
||||
"displayName": "加载中组件",
|
||||
"version": "1.0.0",
|
||||
"description": "加载中组件",
|
||||
"keywords": [
|
||||
"加载",
|
||||
"加载中",
|
||||
"加载组件"
|
||||
],
|
||||
"repository": "https://github.com/zhouwei1994/uni-app-demo",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.0.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "465081029"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
uni_modules/z-loading/readme.md
Normal file
27
uni_modules/z-loading/readme.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# 加载中组件
|
||||
|
||||
加载中组件
|
||||
|
||||
| `QQ交流群(607391225)` | `微信交流群（加我好友备注"进群"）` |
|
||||
| ----------------------------|--------------------------- |
|
||||
|||
|
||||
| QQ群号：607391225 |微信号：zhou0612wei|
|
||||
|
||||
### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
|
||||
|
||||
### 案例一
|
||||
```
|
||||
<z-loading></z-loading>
|
||||
```
|
||||
|
||||
### 用法第一步
|
||||
```
|
||||
// vuex里面注册loadingShow变量和setLoadingShow赋值方法
|
||||
```
|
||||
|
||||
### 用法第二步
|
||||
```
|
||||
import store from '@/store';
|
||||
//调用vuex方法打开加载动画
|
||||
store.commit("setLoadingShow", true);
|
||||
```
|
||||
Reference in New Issue
Block a user