Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to realize the custom dialog box by WeChat Mini Programs". The editor shows you the operation process through the actual case, and the operation method is simple, fast and practical. I hope this article "how to realize the custom dialog box by WeChat Mini Programs" can help you solve the problem.

Effect picture:

Index.wxml:

Click to enter the content to cancel the confirmation.

Index.js:

Var inputinfo = "" Var app = getApp () Page ({data: {animationData: ", showModalStatus:false}, onLoad: function () {}, showModal: function () {/ / display mask layer 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)}, clickbtn:function () {if (this.data.showModalStatus) {this.hideModal () } else {this.showModal () }, hideModal: function () {/ / hide mask layer 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)}, click_cancel:function () {console.log ("Click cancel") This.hideModal (), click_ok:function () {console.log ("Click OK = =, the input information is = =", inputinfo); this.hideModal ();}, input_content:function (e) {console.log (e); inputinfo = e.detail.value;}) this is the end of the content on "how WeChat Mini Programs implements a custom dialog box". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.