/*

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的更多相关文章

  1. 微信小程序-05-详解介绍.js 逻辑层文件

    上一篇介绍了关于.json 的配置文件,本篇介绍关于.js 逻辑层文件 微信小程序-05-详解介绍.js 逻辑层文件 宝典官方文档: https://developers.weixin.qq.com/ ...

  2. 微信小程序-06-详解介绍.js 逻辑层文件-注册页面

    上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...

  3. 微信小程序图表插件 - wx-charts

    微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx-c ...

  4. 微信小程序——3、逻辑js文件

    逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的 ...

  5. 小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名

    小程序点击跳转外部页面 1.index.wxml  添加点击事件   标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitat ...

  6. 微信小程序之获取验证码js

    在微信小程序中怎样实现获取验证码的倒计时功能捏,倒计时的原理是一样一样的,就是某些地方需要注意. 第一步:结构 <view class='get-code' wx:if="{{!isS ...

  7. 微信小程序- 提示不在以下合法域名列表中

    第一次开发微信小程序时在访问后台数据时总是提示 提示上面问题主要有两个原因: 1.为配置安全合法域名列表: 微信小程序在开发时需要在官网配置固定的数据来源网站: 登录小程序平台中->设置: 图中 ...

  8. 微信小程序-提示框

    提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', dur ...

  9. 微信小程序笔记<四>page.js —— 页面注册

    小程序的每个页面都是独立的,每个页面都必须有 page.js 和 page.wxhl 文件,page.json 和 page.wxss 文件非必要文件,注意如果创建 page.json 则至少保证有一 ...

随机推荐

  1. 从后端到前端之Vue(三)小结以及一颗真实的大树

    上一篇写了一下tab,下面整理一下用过的知识点,本想按照官网的文档,整理一下可以更清晰,结果也许是我的方法不对吧,总之更模糊了. 按照官网文档的顺序整理到了表单输入绑定之前,因为之前大致也就只涉及到这 ...

  2. python基础-python解释器多版本共存-变量-常量

    一.编程语言的发展史 机器语言-->汇编语言-->高级语言,学习难度及执行效率由高到低,开发效率由低到高 机器语言:二进制编程,0101 汇编语言:用英文字符来代替0101编程 高级语言: ...

  3. Aspnet Mvc 前后端分离项目手记(四)vue项目的搭建(一)(iview)

    一项目创建 1,搭建vue-cli脚手架(依赖npm) 没有安装npm的同学,请先使用npm install -g vue-cli ,然后再进行这一步 安装的过程中有几项 ? Project name ...

  4. JAVA-Spring框架之IOC(DI)(1)

    spring框架概述 spring是一个service层的框架,可以整合许多其 他框架,进行工作 spring的主要技术是IOC(DI)和AOP IOC(DI)-控制反转(依赖注入)AOP - 面向切 ...

  5. 02、HTML 基础

    1.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <!DOCTYPE html> <html> < ...

  6. 1.4.2python网站地图爬虫(每天一更)

    # -*- coding: utf-8 -*- ''' Created on 2019年5月6日 @author: 薛卫卫 ''' import urllib.request import re de ...

  7. perspective transform透视矩阵快速求法+矩形矫正

    算了半天一直在思考如何快速把矩阵算出来,网上基本都是在说边长为1的正方形的变换方式=.=   不怎么用得上…… 公式推导推半天,计算还麻烦.... ++++++++++++++++++++++++++ ...

  8. CentOS7 部署K8S集群

    虚拟机:   VMware® Workstation 12 Pro 12.5.9 build-7535481操作系统:CentOS Linux release 7.6.1810 (Core)   部署 ...

  9. git项目版本处理--远程分支重新拉取本地代码如何处理

    最近在eclipse 上用git拉取分支,提交代码因为提交代码提交了一些配置文件造成 后续同事提交代码一直出现代码冲突问题 项目老大又重新拉取了一条代码 同样的分支名字 当时有点蒙不知道接着怎么弄:场 ...

  10. 第四次作业;创建raid5,源码编译安装;磁盘配额

    创建raid5 格式化 ext4 创建物理卷: 创建卷组: 创建逻辑卷: 格式化  ext4 挂载 开机自启动 创建raid配置文件 源码编译安装: 创建本地yum仓库 umount /dev/sr0 ...