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

效果图：

index.wxml：

 button type= default bindtap= clickbtn 
 /button 
 view >
index.js：
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(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 () { 
 // 隐藏遮罩层 
 var animation = 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; 
})
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

更多微信微信小程序 自定义对话框实例详解相关文章请关注PHP中文网！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！