Examples of the WeChat mini-app custom dialog box and mini-app details

Examples of mini-program custom dialog box and mini-program details

Examples of the mini-program custom dialog box

:

Index. wxml:

<Button type = "default" bindtap = "clickbtn"> click </button> <view class = "commodity_screen" bindtap = "hideModal" wx: if = "{showModalStatus }}"> </view> <view animation =" {animationData }}" class = "commodity_attr_box" wx: if = "{showModalStatus }}"> <! -- Dialog Box title --> <view class = "dialog-title"> enter the content </view> <! -- Dialog box input --> <view class = "input-view"> <input type = "text" bindblur = "input_content" class = "input-style"/> </view> <! -- Dialog box button --> <view class = "line-top"> </view> <view class = "btn-view"> <view class = "btn-cancel" bindtap = "click_cancel"> cancel </view> <view class = "btn-line"> </view> <view class = "btn-cancel" bindtap = "click_ OK"> true set </view>

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

Source code download: http://xiazai.jb51.net/201701/yuanma/modalTest (jb51.netw..rar

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!