自制微信小程序 提示插件 -- noticeUitis.js

Posted 2020-09-22 F_Ender

　/*

  noticeMsg.js

　by: FEer_llx

　2016/06/09

　*/

var notice = {
  //用于计时器，判断动画事件结束时下一个动画事件才能执行
  flag: true,
  //头部自动下拉隐藏提示效果
  autoSlideDown: function (opt) {
    opt._this.animation.translateY(opt.changeVaule).step()
    opt._this.setData({
      animation: opt._this.animation.export()
    })
    setTimeout(function () {
      opt._this.animation.translateY(-opt.changeVaule).step()
      opt._this.setData({
        animation: opt._this.animation.export()
      })
    }, 3000)
  },
  //头部下拉提示效果
  slideDown: function (opt) {
    var _self = this;
    opt._this.animation.translateY(45).step()
    opt._this.setData({
      animation: opt._this.animation.export()
    })
  },
  //头部隐藏提示效果
  slideUp: function (opt) {
    opt._this.animation.translateY(-45).step()
    opt._this.setData({
      animation: opt._this.animation.export()
    })
  },
  //页面居中自动淡入淡出提示效果
  autoFade:function(opt){
    var that = this;
    that.flag = false;
    opt._this.animation.opacity(1).step()
    opt._this.setData({
      animation: opt._this.animation.export()
    })
    setTimeout(function () {
      opt._this.animation.opacity(0).step()
      opt._this.setData({
        animation: opt._this.animation.export()
      })
    }, 2000)
    setTimeout(function () {
      opt._this.setData({
        showTip: false
      })
      that.flag = true;
    }, 3000)
  },
  init: function (obj) { 
    var that = this;
    if (!obj || !obj.pointTo || !obj.effect) {
      return;
    }
    var opt = {
      _this: obj.pointTo,
      effect: obj.effect,
      during: obj.during || 100,
      changeVaule: obj.changeVaule || 50,
      delay: obj.delay || 0,
      transformOrigin: obj.transformOrigin || ‘50% 50% 0‘,
      timingFunction: obj.timingFunction || "linear",
    }
    opt._this.animation = wx.createAnimation({
      duration: opt.during,
      timingFunction: opt.timingFunction,
      delay: opt.delay,
      transformOrigin: opt.transformOrigin
    })
    //执行对应的效果函数
    if (opt.effect == "autoSlideDown"){
      that.autoSlideDown(opt);
　　　　return;
    } else if (opt.effect == "slideDown") {
      that.slideDown(opt);
      opt._this.closeTip = function (){
        that.slideUp(opt);
      }
　　　　return;
    } else if (opt.effect == "autoFade"){
      opt._this.setData({
        showTip: true
      })
      if(that.flag){
        that.autoFade(opt);
      }
　　　　return;
    }else{
　　　　return;
　　}
  }
}

module.exports.notice = notice;

　　

调用：

var noticeUtils = require(‘../../utils/noticeUtils‘)；

Page({
　　data:{
　　　　animation: ""
　　}

　　...

　　//在需要调用的地方调用该初始化方法即可如：
　　noticeUtils.notice.init({
 　　 pointTo: this,
　　　//动画事件函数名称
 　　 effect: "slideDown",
　　  //动画执行的时间
 　　 during: 500,
　　  //动画过程需要改变的值，如改变的位移
 　　 changeVaule: 45,
　　　//动画延迟多少时间执行
 　　 delay: 0,
　　  //动画中心点
  　　transformOrigin: ‘50% 50% 0‘,
　　　//动画执行时的线性
  　　timingFunction: "linear"
　　})

　　...

)}

　　

wxml：

  <view animation="{{animation}}" class="tip-slidedown"><text>提示：你好！</text><icon bindtap="closeTip" type="cancel" size="20" color="#fff" style="float: right"/></view>

　　

补充说明：

　　待续~~