Heim > Artikel > WeChat-Applet > Verwenden Sie ein Miniprogramm, um eine Popup-Fenster-Eingabekomponente zu schreiben
Als ich das Projekt schrieb, stellte ich fest, dass das Miniprogramm keine eigene Popup-Eingabekomponente hatte, also musste ich selbst eine schreiben.
Stil und sichtbare Ereignisse der Deckschicht
wxml-Code:
<view class="body"> <button bindtap='eject'>弹窗</button> </view> <view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>
wxss-Code:
.model{ position: absolute; width: 100%; height: 100%; background: #000; z-index: 999; opacity: 0.5; top: 0; left:0; }
js-Code :
/** * 页面的初始数据 */ data: { showModal: false, }, /** * 控制遮盖层的显示 */ eject:function(){ this.setData({ showModal:true }) }
Stil und sichtbare Ereignisse des Popup-Fensters
wxml-Code:
<view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'> <view class='windowRow'> <text class='userTitle'>标题 </text> <view class='back' bindtap='back'> 返回 </view> </view> <view class='wishName'> <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input> </view> <view class='wishbnt'> <button class='wishbnt_bt' bindtap='ok'>确定</button> </view> </view>
wxss-Code:
.modalDlg{ width: 70%; position: fixed; top:350rpx; left: 0; right: 0; z-index: 9999; margin: 0 auto; background-color: #fff; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center; } .windowRow{ display: flex; flex-direction: row; justify-content: space-between; height: 110rpx; width: 100%; } .back{ text-align: center; color: #f7a6a2; font-size: 30rpx; margin: 30rpx; } .userTitle{ font-size: 30rpx; color: #666; margin: 30rpx; } .wishName{ width: 100%; justify-content: center; flex-direction: row; display: flex; margin-bottom: 30rpx; } .wish_put{ width: 80%; border: 1px solid; border-radius: 10rpx; padding-left: 10rpx; } .wishbnt{ width: 100%; font-size: 30rpx; margin-bottom: 30rpx; } .wishbnt_bt{ width: 50%; background-color: #f7a6a2; color: #fbf1e8; font-size: 30rpx; border: 0; }
js-Code:
/** * 页面的初始数据 */ data: { showModal: false, textV:'' }, /** * 控制显示 */ eject:function(){ this.setData({ showModal:true }) }, /** * 点击返回按钮隐藏 */ back:function(){ this.setData({ showModal:false }) }, /** * 获取input输入值 */ wish_put:function(e){ this.setData({ textV:e.detail.value }) }, /** * 点击确定按钮获取input值并且关闭弹窗 */ ok:function(){ console.log(this.data.textV) this.setData({ showModal:false }) }
Zum Schluss präsentiere ich den vollständigen Code, er ist etwas ausführlich, ich möchte so detailliert wie möglich sein
wxml-Code:
<view class="body"> <button bindtap='eject'>弹窗</button> </view> <view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view> <view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'> <view class='windowRow'> <text class='userTitle'>标题 </text> <view class='back' bindtap='back'> 返回 </view> </view> <view class='wishName'> <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input> </view> <view class='wishbnt'> <button class='wishbnt_bt' bindtap='ok'>确定</button> </view> </view>
WXSS-Code:
.body{ width: 100%; height: 100%; background-color: #fff; position: fixed; display: flex; } .body button{ height: 100rpx; } .model{ position: absolute; width: 100%; height: 100%; background: #000; z-index: 999; opacity: 0.5; top: 0; left:0; } .modalDlg{ width: 70%; position: fixed; top:350rpx; left: 0; right: 0; z-index: 9999; margin: 0 auto; background-color: #fff; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center; } .windowRow{ display: flex; flex-direction: row; justify-content: space-between; height: 110rpx; width: 100%; } .back{ text-align: center; color: #f7a6a2; font-size: 30rpx; margin: 30rpx; } .userTitle{ font-size: 30rpx; color: #666; margin: 30rpx; } .wishName{ width: 100%; justify-content: center; flex-direction: row; display: flex; margin-bottom: 30rpx; } .wish_put{ width: 80%; border: 1px solid; border-radius: 10rpx; padding-left: 10rpx; } .wishbnt{ width: 100%; font-size: 30rpx; margin-bottom: 30rpx; } .wishbnt_bt{ width: 50%; background-color: #f7a6a2; color: #fbf1e8; font-size: 30rpx; border: 0; }
JS-Code:
Page({ /** * 页面的初始数据 */ data: { showModal: false, textV:'' }, /** * 控制显示 */ eject:function(){ this.setData({ showModal:true }) }, /** * 点击返回按钮隐藏 */ back:function(){ this.setData({ showModal:false }) }, /** * 获取input输入值 */ wish_put:function(e){ this.setData({ textV:e.detail.value }) }, /** * 点击确定按钮获取input值并且关闭弹窗 */ ok:function(){ console.log(this.data.textV) this.setData({ showModal:false }) } })
Empfohlenes Tutorial: „WeChat Mini Program“
Das obige ist der detaillierte Inhalt vonVerwenden Sie ein Miniprogramm, um eine Popup-Fenster-Eingabekomponente zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!