微信小程序原生自定義彈窗效果

第微信小程序原生自定義彈窗效果微信小程序原生的在彈出層wx.showModal中可以通過(guò)配置項(xiàng)editable配置輸入框，但是對(duì)于微信的版本有限制，微信版本過(guò)低無(wú)法顯示，所以需要實(shí)現(xiàn)彈出層的效果

如下圖

index.wxml

!--遮罩層--

viewwx:if="{{isShow}}"

!--可在此按需求自定義遮罩--

view

view

text請(qǐng)輸入距離（km）/text

inputtype="number"bindinput="bindKeyInput"placeholder="請(qǐng)輸入1-80之間的整數(shù)"/

/view

view

viewcatchtap="hideCover"取消/view

view確認(rèn)/view/view

/view

/view

index.js

Page({

data:{

inputDisValue:'',

}

})

//實(shí)時(shí)獲取到輸入的值

bindKeyInput(e){

console.log(e.detail.value)

this.setData({

inputDisValue:e.detail.value

})

hideCover(){

this.setData({

isShow:false

})

showCover(){

this.setData({

isShow:true

})

},

index.wxss

.bg{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.5);

padding:020rpx;

.btn-group{

position:absolute;

left:0;

bottom:0;

width:100%;

display:flex;

justify-content:space-around;

font-weight:bold;

padding:20rpx0;

.weui-input{

background-color:#f1f1f1;

border-radius:10rpx;

width:400rpx;

padding:16rpx16rpx;

.cover{

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

display:flex;

justify-content:center;

align-items:center;

z-index:999;

.cover_child{

width:550rpx;

height:300rpx;

background:rgba(255,255,255,1);

border-radius:20rpx;

display:flex;

flex-direction:column;

align-items:center;

z-index:5;

.child-title{

white-space:nowrap;

margin-top:60rpx;

height:32rpx;

font-size:34rpx;

font-weight:bold;

color:#333333;

line-height:36rpx;

margin-bottom:31rpx;

.cross{

margin-bottom:110rpx;

bottom:0rpx;

position: