微信小程序原生自定义弹窗效果

发布网友发布时间：7小时前

共1个回答

热心网友时间：7小时前

微信小程序原生的弹出层wx.showModal可以通过配置项editable来配置输入框，但是其使用受到微信版本的限制，微信版本过低时无法显示。因此，我们需要实现一个自定义弹窗效果，如下图所示。

index.wxml

请输入距离（km）

取消
确认

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;
}

通过以上代码，我们可以实现一个自定义的弹窗效果，满足微信版本限制下的需求。