modal彈出框遮罩層可實(shí)現(xiàn)提示信息、驗(yàn)證碼等功能
然而在官方文檔已經(jīng)刪除了modal的頁(yè)面，說(shuō)要廢棄modal
就個(gè)人而言modal組件無(wú)法被wx.showmodal完全替代。大家都知道小程序的wxml的組件可以通過(guò)改變js的值實(shí)現(xiàn)重新渲染，而接口是無(wú)法實(shí)現(xiàn)的
有同感的也不止博主一個(gè)人
官方18-5-13的建議要實(shí)現(xiàn)此類功能也是用modal
屬性
說(shuō)下遮罩層實(shí)現(xiàn)，通過(guò)改變modal的hidden屬性來(lái)控制是否顯示，通過(guò)監(jiān)聽(tīng)confirm方法來(lái)確認(rèn)提交，通過(guò)bindinput來(lái)監(jiān)聽(tīng)modal內(nèi)表單組件內(nèi)容
js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
page({ data: { hiddenmodal1:true, hiddenmodal2:true, input:null }, showmodal1:function(e){ this.setdata({hiddenmodal1:false}) }, model1confirm:function(e){ this.setdata({ hiddenmodal1: true }) wx.showtoast({ title: '我覺(jué)得ok', }) }, model1cancel:function(e){ this.setdata({ hiddenmodal1: true }) wx.showtoast({ title: '我覺(jué)得不行', }) }, input:function(e){ this.setdata({input:e.detail.value}) }, showmodal2: function (e) { this.setdata({ hiddenmodal2: false }) }, model2confirm: function (e) { this.setdata({ hiddenmodal2: true }) wx.showtoast({ title: '確定' +this.data.input, icon:'none' }) }, model2cancel: function (e) { this.setdata({ hiddenmodal2: true }) wx.showtoast({ title: '取消'+this.data.input, icon: 'none' }) }}) |
wxml
|
1
2
3
4
5
6
7
8
|
<button type="primary" bindtap='showmodal1'>彈出提示modal</button><button type="default" bindtap='showmodal2'>彈出帶文本框的modal</button><modal hidden="{{hiddenmodal1}}" title="提示modal" confirm-text="是" cancel-text="否" bindconfirm="model1confirm" bindcancel="model1cancel"> modal是真的好用</modal><modal hidden="{{hiddenmodal2}}" title="文本框的modal" confirm-text="提交" cancel-text="取消" bindconfirm="model2confirm" bindcancel="model2cancel"> <input placeholder='請(qǐng)輸入內(nèi)容' bindinput='input'/></modal> |
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件（可帶文本框）的文章就介紹到這了,更多相關(guān)微信小程序modal彈出框遮罩層組件內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/xjc8289555/article/details/80327267
