十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍“微信小程序怎么实现自定义对话框”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序怎么实现自定义对话框”文章能帮助大家解决问题。
创新互联 - 重庆服务器托管,四川服务器租用,成都服务器租用,四川网通托管,绵阳服务器托管,德阳服务器托管,遂宁服务器托管,绵阳服务器托管,四川云主机,成都云主机,西南云主机,重庆服务器托管,西南服务器托管,四川/成都大带宽,机柜大带宽、租用·托管,四川老牌IDC服务商效果图:
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; } })
关于“微信小程序怎么实现自定义对话框”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。