微信小程序 自定义对话框实例详解

 点击

 请输入内容

     取 消

     确 定

varinputinfo ="";

varapp = getApp()

Page({

 data: {

  animationData:"",

  showModalStatus:false

 },

 onLoad:function() {

 },

 showModal:function() {

  // 显示遮罩层

  varanimation = wx.createAnimation({

   duration: 200,

   timingFunction:"linear",

   delay: 0

  })

  this.animation = animation

  animation.translateY(300).step()

  this.setData({

   animationData: animation.export(),

   showModalStatus:true

  })

  setTimeout(function() {

   animation.translateY(0).step()

   this.setData({

    animationData: animation.export()

   })

  }.bind(this), 200)

 },

 clickbtn:function(){

  if(this.data.showModalStatus){

   this.hideModal();

  }else{

   this.showModal();

  }

 },

 hideModal:function() {

  // 隐藏遮罩层

  varanimation = wx.createAnimation({

   duration: 200,

   timingFunction:"linear",

   delay: 0

  })

  this.animation = animation

  animation.translateY(300).step()

  this.setData({

   animationData: animation.export(),

  })

  setTimeout(function() {

   animation.translateY(0).step()

   this.setData({

    animationData: animation.export(),

    showModalStatus:false

   })

  }.bind(this), 200)

 },

 click_cancel:function(){

  console.log("点击取消");

   this.hideModal();

 },

 click_ok:function(){

  console.log("点击了确定===，输入的信息为为==",inputinfo);

   this.hideModal();

 },

 input_content:function(e){

  console.log(e);

  inputinfo = e.detail.value; 

 }

})