This article mainly introduces detailed information about examples in the mini-program custom dialog box. the instance code and implementation are provided here. For more information, see
Examples of the mini-program custom dialog box
:
Click
Enter content
Cancel
Confirm
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. translate( 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 () {// hide mask layer var animation = wx. createAnimation ({duration: 200, timingFunction: "linear", delay: 0}) this. animation = animation. translate( 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 ("Click to 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 ;}})
Thank you for reading this article. I hope it will help you. thank you for your support for this site!
For more details about examples in the mini-program custom dialog box, please follow the PHP Chinese network!