/*
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;
}
更多提示效果待拓展~！