背景
微信小程序原生的在弹出层wx.showModal中可以通过配置项editable配置输入框，但是对于微信的版本有限制，微信版本过低无法显示，所以需要实现弹出层的效果
如下图
代码
index.wxml
<!-- 遮罩层 -->
<view wx:if="{{isShow}}" class='cover'>
<!-- 可在此按需求自定义遮罩 -->
<view style="position: relative;">
<view class='cover_child'>
<text class="child-title">请输入距离（km）</text>
<input class="weui-input" type="number" bindinput="bindKeyInput" placeholder="请输入1-80之间的整数" />
</view>
<view class='btn-group'>
<view catchtap="hideCover">取消</view>
<view style="color: #5A6B8F;">确认</view></view>
</view>
</view>index.js
Page({
data: {
inputDisValue:'',
}
})
//实时获取到输入的值
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: 0 20rpx;
}
.btn-group {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-around;
font-weight: bold;
padding: 20rpx 0;
}
.weui-input {
background-color: #f1f1f1;
border-radius: 10rpx;
width: 400rpx;
padding: 16rpx 16rpx;
}
.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: fixed;
width: 60rpx;
height: 60rpx;
z-index: 5;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。