小程序使用wepy框架自定义loading组件
1:定义组
<template>
<view class="app-loading-container" style="{{options.cssText}}" wx:if="{{options.visible}}">
<image mode="aspectFit" src="{{appLoading}}" class="app-loading-img animated {{options.className}}"></image>
</view>
</template> <script>
import wepy from 'wepy';
export default class Loading extends wepy.component {
data = {
options: {
className: '',//动画类名
visible: false,//显示或是隐藏
cssText: ''//需要时候,控制样式
},
appLoading: '../../static/images/public/loading.gif'
}
show(cssText = '') {
this.options.visible = true;
this.options.cssText = cssText;
this.options.className = 'fadeIn';
this.$apply();
wepy.hideLoading();
};
hide(cssText = '') {
this.options.cssText = cssText;
this.options.className = 'fadeOut';
this.$apply();
this._out();
};
_out() {//复位
setTimeout(() => {
this.options.visible = false;
this.$apply();
}, 1000);
}
}
</script>
2:页面引用组件
import Loading from 'component/loading/Loading';
3:挂载
...
components = {
Loading,
};
...
4:模板上使用 loading 组件
<template>
<view class="container">
...
<!-- 加载动画 -->
<Loading/>
...
</view>
</template>
5:调用组件
...
async onLoad() {
//显示
this.$invoke('Loading', 'show');
};
//这样就可以根据自己的需求控制 loading 组件
...
五个步骤,是从定义到使用的流程,这种没有像 alert 组件由回调,定义组件简单,下次就开始定义alert confirm 组件的文章
小程序使用wepy框架自定义loading组件的更多相关文章
- 小程序开发--WePy框架
现如今mvvm框架如此火热,其核心思想即js逻辑层不直接操作DOM,只改变组件状态:而视图层则通过模板template进行渲染. 1.WePy项目的目录结构 ├── dist 小程序运行代码目录 ├─ ...
- 微信小程序学习笔记四 自定义组件
1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 快速上手小程序的mpvue框架
一.什么是mpvue框架? mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心(所以建议熟练掌握vue再使用mpvue框架,否则还是建议去使用原生框架去写小程序) ...
- 微信小程序(微信应用号)组件讲解[申明:来源于网络]
微信小程序(微信应用号)组件讲解[申明:来源于网络] 地址:http://www.cnblogs.com/muyixiaoguang/p/5902008.html
- 微信小程序把玩(十七)input组件
原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml ...
- 微信小程序把玩(十一)icon组件
原文:微信小程序把玩(十一)icon组件 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> <icon t ...
- 微信小程序把玩(十三)progress组件
原文:微信小程序把玩(十三)progress组件 进度条描述的是一种加载的状态,比如软件升级下载进度, 视频,图片下载进度- 主要属性: wxml <progress percent=" ...
- 微信小程序把玩(九)scroll-view组件
原文:微信小程序把玩(九)scroll-view组件 scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用 ...
随机推荐
- jquery的animate能渐变background-color
在freecodecamp 上学习复习时,写了一个demo,引用了 jquery 实现 color 的渐变动画,然后运行测试的时候,发现其他功能都正常,就是无法是实现颜色的动画. 如: $('butt ...
- python简单的购物系统
#coding = utf-8 #2016-11-19#我的工资是存在文件中的,执行后会判断是否存过工资,如果存过无需输入,直接购物,没存过需要输入工资#wages.txt是存工资的文件 import ...
- Pyhton学习——Day23
#re模块方法:findall search#findall:返回所有满足匹配条件的数值,放在列表里#search : #函数会在字符串内查找模式匹配,只到找到第一个匹配然后返回一个包含匹配信息的对象 ...
- 【HNOI】合唱队
[HNOI]合唱队 题意 对于一个初始序列,保证两两不同,通过一些变换得到目标序列: 第一个值直接插入空的当前队列 对于从第二个值开始的每个值 如果原序列中 $ a[i] $,若 $ a[i]> ...
- pycharm 2018 3.4 for mac破解
使用pycharm的小伙伴都知道,pycharm分为社区版和专业版,这里具体区别不作过多介绍.本文带大家安装mac版的2018 pycharm 3.4 1.去官网下载pycharm 3.4 for m ...
- visual studio 2015将已有项目添加到码云(gitee)
visual studio 2015将已有项目添加到码云的步骤包括:gitee新建项目.清空项目及VS发布项目 1.gitee新建项目 2.清空项目 清空项目则会将vs项目的master分支发布到gi ...
- JavaScript push(),join() 函数
定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObje ...
- 2015 Multi-University Training Contest 7 hdu 5379 Mahjong tree
Mahjong tree Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- 一个HTTP连接是包含两部分的,请求报文和响应报文这俩组合起来才是一次完整的HTTP请求,并不会单独显示请求报文或者响应报文
一个HTTP连接是包含两部分的,请求报文和响应报文这俩组合起来才是一次完整的HTTP请求,并不会单独显示请求报文或者响应报文. 2.注意看,一次HTTP请求,是包括这两部分的
- oracle学习之第一个存储过程:打印Hello World
数据库对象:表.视图.索引.序列.同义词.存储过程.存储函数 存储过程:指的是存储在数据库中供全部用户程序调用的子程序叫存储过程.存储函数 存储过程和存储函数的同样点:完毕特定功能的程序 存储过程和存 ...