【移動應(yīng)用開發(fā)技術(shù)】微信小程序怎樣自定義對話框

【移動應(yīng)用開發(fā)技術(shù)】微信小程序怎樣自定義對話框

這篇文章將為大家詳細講解有關(guān)微信小程序怎樣自定義對話框，在下覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。微信小程序自定義對話框?qū)嵗斀庑Ч麍D：index.wxml：<button

type="default"

bindtap="clickbtn">

點擊

</button>

<view

class="commodity_screen"

bindtap="hideModal"

wx:if="{{showModalStatus}}"></view>

<view

animation="{{animationData}}"

class="commodity_attr_box"

wx:if="{{showModalStatus}}">

<!--對話框標題-->

<view

class="dialog-title">

請輸入內(nèi)容

</view>

<!--對話框輸入部分-->

<view

class="input-view">

<input

type="text"

bindblur="input_content"

class="input-style"/>

</view>

<!--對話框按鈕-->

<view

class="line-top">

</view>

<view

class="btn-view">

<view

class="btn-cancel"

bindtap="click_cancel">

取

消

</view>

<view

class="btn-line">

</view>

<view

class="btn-cancel"

bindtap="click_ok">

確

定

</view>

</view>

</view>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);

inpu