微信小程序怎么實現自定義對話框

蝸牛 互聯網技術資訊 2022-04-16 165 0

這篇文章主要介紹“微信小程序怎么實現自定義對話框”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“微信小程序怎么實現自定義對話框”文章能幫助大家解決問題。

效果圖:

微信小程序怎么實現自定義對話框  微信小程序 第1張

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">?
?請輸入內容?
</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);?
??inputinfo?=?e.detail.value;??
?}?
?
})

關于“微信小程序怎么實現自定義對話框”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注蝸牛博客行業資訊頻道,小編每天都會為大家更新不同的知識點。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看