自制微信小程序 提示插件 -- noticeUitis.js
/* noticeMsg.js by: FEer_llx Modify 2016/08/24 */ function weNotice(obj) {
this.fadeFlag = true;
this.opt = {
_this: obj.pointTo,
during: obj.during || 100,
changeVaule: obj.changeVaule || 50,
delay: obj.delay || 0,
transformOrigin: obj.transformOrigin || '50% 50% 0',
timingFunction: obj.timingFunction || "linear",
}
//小程序的this
var w_this = this.opt._this; w_this.animation = wx.createAnimation({
duration: this.opt.during,
timingFunction: this.opt.timingFunction,
delay: this.opt.delay,
transformOrigin: this.opt.transformOrigin
}) if (typeof this.autoFade != "function") {
weNotice.prototype.autoFade = function (errMsg) {
if (this.fadeFlag){
w_this.setData({
errMsg: errMsg,
showTip: true
})
this.fadeFlag = false;
console.log(this.fadeFlag) w_this.animation.opacity(1).step()
w_this.setData({
animation: w_this.animation.export()
}) setTimeout(function () {
w_this.animation.opacity(0).step()
w_this.setData({
animation: w_this.animation.export()
})
}.bind(this), 2000)
setTimeout(function () {
w_this.setData({
showTip: false
})
this.fadeFlag = true;
}.bind(this), 3000)
}
}
}
} module.exports.weNotice = weNotice;
使用说明:
1、js 引入
var noticeUtils = require('../../utils/noticeUtils'); 在onShow()方法初始化对象
this.fNotice = new noticeUtils.weNotice({
pointTo: this,
during: 500,
changeVaule: 1,
delay: 0,
transformOrigin: '50% 50% 0',
timingFunction: "linear"
}); 在需要提示的地方,调用this.fNotice的原型方法传入需要提示的错误信息即可 this.fNotice.autoFade(errMsg); 2、wxml
<view class="err-massage" animation="{{animation}}" wx:if="{{showTip}}">{{errMsg}}</view> 3、wxss
/*提示样式*/
.err-massage{
position: fixed;
top: 45%;
left: 50%;
margin-left: -110px;
width: 220px;
padding: 8px;
font-size: 32rpx;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.5);
border-radius: 40px;
opacity: 1;
z-index: 9999;
}
更多提示效果待拓展~!
自制微信小程序 提示插件 -- noticeUitis.js的更多相关文章
- 微信小程序-05-详解介绍.js 逻辑层文件
上一篇介绍了关于.json 的配置文件,本篇介绍关于.js 逻辑层文件 微信小程序-05-详解介绍.js 逻辑层文件 宝典官方文档: https://developers.weixin.qq.com/ ...
- 微信小程序-06-详解介绍.js 逻辑层文件-注册页面
上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...
- 微信小程序图表插件 - wx-charts
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx-c ...
- 微信小程序——3、逻辑js文件
逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的 ...
- 小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名
小程序点击跳转外部页面 1.index.wxml 添加点击事件 标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitat ...
- 微信小程序之获取验证码js
在微信小程序中怎样实现获取验证码的倒计时功能捏,倒计时的原理是一样一样的,就是某些地方需要注意. 第一步:结构 <view class='get-code' wx:if="{{!isS ...
- 微信小程序- 提示不在以下合法域名列表中
第一次开发微信小程序时在访问后台数据时总是提示 提示上面问题主要有两个原因: 1.为配置安全合法域名列表: 微信小程序在开发时需要在官网配置固定的数据来源网站: 登录小程序平台中->设置: 图中 ...
- 微信小程序-提示框
提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', dur ...
- 微信小程序笔记<四>page.js —— 页面注册
小程序的每个页面都是独立的,每个页面都必须有 page.js 和 page.wxhl 文件,page.json 和 page.wxss 文件非必要文件,注意如果创建 page.json 则至少保证有一 ...
随机推荐
- 从后端到前端之Vue(三)小结以及一颗真实的大树
上一篇写了一下tab,下面整理一下用过的知识点,本想按照官网的文档,整理一下可以更清晰,结果也许是我的方法不对吧,总之更模糊了. 按照官网文档的顺序整理到了表单输入绑定之前,因为之前大致也就只涉及到这 ...
- python基础-python解释器多版本共存-变量-常量
一.编程语言的发展史 机器语言-->汇编语言-->高级语言,学习难度及执行效率由高到低,开发效率由低到高 机器语言:二进制编程,0101 汇编语言:用英文字符来代替0101编程 高级语言: ...
- Aspnet Mvc 前后端分离项目手记(四)vue项目的搭建(一)(iview)
一项目创建 1,搭建vue-cli脚手架(依赖npm) 没有安装npm的同学,请先使用npm install -g vue-cli ,然后再进行这一步 安装的过程中有几项 ? Project name ...
- JAVA-Spring框架之IOC(DI)(1)
spring框架概述 spring是一个service层的框架,可以整合许多其 他框架,进行工作 spring的主要技术是IOC(DI)和AOP IOC(DI)-控制反转(依赖注入)AOP - 面向切 ...
- 02、HTML 基础
1.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <!DOCTYPE html> <html> < ...
- 1.4.2python网站地图爬虫(每天一更)
# -*- coding: utf-8 -*- ''' Created on 2019年5月6日 @author: 薛卫卫 ''' import urllib.request import re de ...
- perspective transform透视矩阵快速求法+矩形矫正
算了半天一直在思考如何快速把矩阵算出来,网上基本都是在说边长为1的正方形的变换方式=.= 不怎么用得上…… 公式推导推半天,计算还麻烦.... ++++++++++++++++++++++++++ ...
- CentOS7 部署K8S集群
虚拟机: VMware® Workstation 12 Pro 12.5.9 build-7535481操作系统:CentOS Linux release 7.6.1810 (Core) 部署 ...
- git项目版本处理--远程分支重新拉取本地代码如何处理
最近在eclipse 上用git拉取分支,提交代码因为提交代码提交了一些配置文件造成 后续同事提交代码一直出现代码冲突问题 项目老大又重新拉取了一条代码 同样的分支名字 当时有点蒙不知道接着怎么弄:场 ...
- 第四次作业;创建raid5,源码编译安装;磁盘配额
创建raid5 格式化 ext4 创建物理卷: 创建卷组: 创建逻辑卷: 格式化 ext4 挂载 开机自启动 创建raid配置文件 源码编译安装: 创建本地yum仓库 umount /dev/sr0 ...