微信小程序怎么实现自定义对话框

这篇文章主要介绍"微信小程序怎么实现自定义对话框"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"微信小程序怎么实现自定义对话框"文章能帮助大家解决问题。

效果图：

index.wxml：

  点击       请输入内容                    取 消               确 定    

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;   }  })

关于"微信小程序怎么实现自定义对话框"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。