寫項目的時候發(fā)現(xiàn)小程序沒有自帶的彈窗輸入的組件，只能自己寫一個。
1.半透明的遮蓋層遮蓋層的樣式和顯隱事件wxml代碼：
eject'
>彈窗 preventTouchMove'
wx:if='
{
{
showModal}
}
'
>wxss代碼：
.model{
position: absolute;
width: 100%;
height: 100%;
background: #000;
z-index: 999;
opacity: 0.5;
top: 0;
left:0;
}
js代碼：
/** * 頁面的初始數(shù)據(jù) */ data: {
showModal: false, }
, /** * 控制遮蓋層的顯示 */ eject:function(){
this.setData({
showModal:true }
) }
2.彈窗窗口實現(xiàn)彈窗窗口的樣式和顯隱事件wxml代碼：
preventTouchMove'
wx:if='
{
{
showModal}
}
'
> windowRow'
> userTitle'
>標題 back'
bindtap='
back'
> 返回 wishName'
> wish_put'
placeholder='
請輸入內(nèi)容'
class='
wish_put'
> wishbnt'
> wishbnt_bt'
bindtap='
ok'
>確定 wxss代碼：
.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代碼：
/** * 頁面的初始數(shù)據(jù) */ 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值并且關(guān)閉彈窗 */ ok:function(){
console.log(this.data.textV) this.setData({
showModal:false }
) }
3.完整代碼最后獻上完整代碼，有點啰嗦了，想盡量詳細點wxml代碼：
eject'
>彈窗 preventTouchMove'
wx:if='
{
{
showModal}
}
'
>preventTouchMove'
wx:if='
{
{
showModal}
}
'
> windowRow'
> userTitle'
>標題 back'
bindtap='
back'
> 返回 wishName'
> wish_put'
placeholder='
請輸入內(nèi)容'
class='
wish_put'
> wishbnt'
> wishbnt_bt'
bindtap='
ok'
>確定 wxss代碼：
.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代碼：
Page({
/** * 頁面的初始數(shù)據(jù) */ 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值并且關(guān)閉彈窗 */ ok:function(){
console.log(this.data.textV) this.setData({
showModal:false }
) }
}
)推薦教程：
《微信小程序》以上就是使用小程序?qū)懸粋€彈窗輸入組件的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標簽：
小程序本文轉(zhuǎn)載于：
簡書，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
Proxy 對象的了解及學習
下一篇：
小程序new Date()方法失效怎么辦相關(guān)文章相關(guān)視頻小程序swiper輪播CSS3動畫及跳轉(zhuǎn)到指定sw...微信小程序怎么使用車牌號輸入法記一次微信小程序在安卓手機上的白屏問題新手必備的微信小程序開發(fā)指南使用小程序?qū)懸粋€彈窗輸入組件百變小程序組件（下）小程序API接口（一）小程序API接口（二） [溫州做小程序]