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

更新時(shí)間：2022年07月06日 09:45:03 作者：cwj?thin

這篇文章主要為大家詳細(xì)介紹了微信小程序原生自定義彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

背景

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

如下圖

代碼

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之間的整數(shù)" />
? ? ? </view>
? ? ? <view class='btn-group'>
? ? ? ? <view catchtap="hideCover">取消</view>
? ? ? ? <view style="color: #5A6B8F;">確認(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: 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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: