自制微信小程序 提示插件 -- 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;
} 

　　

更多提示效果待拓展~！　

 

转载于:https://www.cnblogs.com/luleixia/p/6973462.html