Examples of the WeChat mini-app custom dialog box

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!