寫項目的時候發(fā)現(xiàn)小程序沒有自帶的彈窗輸入的組件，只能自己寫一個。
目前成都創(chuàng)新互聯(lián)已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、德令哈網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
1.半透明的遮蓋層
遮蓋層的樣式和顯隱事件
wxml代碼：
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代碼：
標(biāo)題 返回
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.完整代碼
最后獻(xiàn)上完整代碼，有點啰嗦了，想盡量詳細(xì)點
wxml代碼：
標(biāo)題 返回
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
})
}
})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
