微信小程序自定义Toast

实现类似于Android的Toast提示

index.js：

var timer;
var inputinfo = "";
var app = getApp()
Page({
  data: {
    animationData:"",
    showModalStatus:false
  },
  
  onLoad: function () {
    
  },
  showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(200).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
    console.log("准备执行");
     timer = setTimeout(function () {
        if(this.data.showModalStatus){
          this.hideModal();
          console.log("是否执行");
      }
    }.bind(this), 3000)
  },
  clickbtn:function(){
    if(this.data.showModalStatus){
      this.hideModal();
    }else{
      this.showModal();
    }
  },
  hideModal: function () {
    if(timer != null){
      clearTimeout(timer);
      timer = null;
    }
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(200).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  },
})

index.wxml：

  点击




  
    
      要显示的内容
    
    
  

效果图：

源码下载链接：

http://download.csdn.net/detail/happy__everyday/9740346

可更新显示内容源码下载：

http://download.csdn.net/detail/happy__everyday/9748650