/*

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. JAVA开发异常处理十大秘诀

    1.前提 第一层:遇到异常首先必须告诉自己,冷静,不要慌.(一看到Bug就心慌,那么武功就施展不了了) 2.入门级 第二层:遇到Bug,第一潜意识看输出异常的信息的(控制台输出,Junit输出,页面输 ...

  2. Visual Studio 调试系列1 Debug 与 Release 模式

    系列目录     [已更新最新开发文章,点击查看详细] Debug 模式 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序. 在Debug模式下调试,可以在断点处看到 ...

  3. 打包名命令:tar

    将多个文件或目录包成一个大文件的命令功能,我们称它是一种"打包命令". tar的参数非常多,这里只列出几个常用的参数,更多的参数你可以自行man tar查询. [root@www ...

  4. 入门训练-4. Fibonacci数列

    问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1. 当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少. 输入格式 输入包含一个整数n ...

  5. Spring MVC中的 权限拦截定义 以及 权限拦截的研发步骤

    权限拦截 (拦截器: 对请求进行区分) 1 实现的价值(作用) 用户未登录:访问没用登录的URL,拦截到以后 跳转回登录 用户未登录:访问登录的URL,直接放行到后续流程处理框架,进行后续的操作 用户 ...

  6. JS面向对象编程(二):构造函数的继承

    对象之间继承的 5 中方法.            比如, 现在有一个"动物"对象的构造函数.            function Animal(){              ...

  7. 入门webpack,看这篇就够了

    什么是webpack? 官网给出的概念是:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递 ...

  8. 【Intellij】Hot Swap Failed & class reloaded

    用 Intellij IDEA 编译程序时遇到了这个问题,如下图所示: 对结果貌似没什么影响,但暂时没找到出现这个情况的原因……

  9. Ubuntu 下jdk的安装

    因为我ubuntu下需要运行一个java程序,其实是想做一下tc,因为浏览器要运行java插件,那个客户端一直下载不了,我记得我装过的,这个问题后面说.然后我就打算重新安装,通过查找资料,终于解决了手 ...

  10. maven项目引用错误 和项目结构问题

    解决办法: 鼠标右键   maven ---->update prroject Configuration 然后 maven clean  maven install