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

背景

微信小程序原生的在弹出层 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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序原生自定义弹窗效果的详细内容...