微信小程序?qū)崿F(xiàn)文本輸入彈窗

更新時間：2022年07月06日 10:38:50 作者：九月鎮(zhèn)靈將

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)文本輸入彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

場景

用戶進入界面彈出輸入窗口，需要用戶輸入內(nèi)容，如果取消則跳轉(zhuǎn)到指定界面，重新進入還會彈出窗口，只有輸入正確內(nèi)容才能正式進入此界面

實現(xiàn)

wxml

<view class="container">
? <view wx:if="{{!completed}}">
? ? <view class='toast-box'>
? ? ? <view class='toastbg'></view>
? ? ? <view class='showToast'>
? ? ? ? <view class='toast-title'>
? ? ? ? ? <text>確認底金?</text>
? ? ? ? </view>
? ? ? ? <view class='toast-main'>
? ? ? ? ? <view class='toast-input'>
? ? ? ? ? ? <input type='number' placeholder='請輸入符合您的保底金額~' focus="true" bindinput='getUserInput'></input>
? ? ? ? ? </view>
? ? ? ? </view>
? ? ? ? <view class='toast-button'>
? ? ? ? ? <view class='cancel'>
? ? ? ? ? ? <button bindtap="cancelSelected">取消</button>
? ? ? ? ? </view>
? ? ? ? ? <view class='success'>
? ? ? ? ? ? <button bindtap="successSelected">確定</button>
? ? ? ? ? </view>
? ? ? ? </view>
? ? ? </view>
? ? </view>
? </view>
</view>

wxss

.container {
? width: 100%;
? min-height: 100vh;
? background-color: #101419;
}

.toast-box {
? width: 100%;
? height: 100%;
? opacity: 1;
? position: fixed;
? top: 0px;
? left: 0px;
}


.toastbg {
? opacity: 0.2;
? background-color: black;
? position: absolute;
? width: 100%;
? min-height: 100vh;
}

.showToast {
? position: absolute;
? opacity: 1;
? width: 70%;
? margin-left: 15%;
? margin-top: 40%;
}

.toast-title {
? padding-left: 5%;
? background-color: #2196f3;
? color: white;
? padding-top: 2vh;
? padding-bottom: 2vh;
? border-top-right-radius: 16rpx;
? border-top-left-radius: 16rpx;
}

.toast-main {
? padding-top: 2vh;
? padding-bottom: 2vh;
? background-color: white;
? text-align: center;
}

.toast-input {
? margin-left: 5%;
? margin-right: 5%;
? border: 1px solid #ddd;
? padding-left: 2vh;
? padding-right: 2vh;
? padding-top: 1vh;
? padding-bottom: 1vh;
}

.toast-button {
? display: flex;
}

.cancel, .success {
? width: 50%;
}

.cancel button {
? color: #999;
? width: 100%;
? background-color: white;
? border-radius: 0px;
? border-bottom-left-radius: 16rpx;
}

.success button {
? color: #1d2228;
? width: 100%;
? background-color: white;
? border-radius: 0px;
? border-bottom-right-radius: 16rpx;
}

js

Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? completed: false, ?// 彈窗控制
? ? deposit: 0 ?// 存儲用戶輸入的內(nèi)容
? },

? // 獲取用戶輸入的內(nèi)容
? getUserInput(event) {
? ? const money = event.detail.value || event.detail.text
? ? this.setData({deposit: money})
? },

? // 取消按鈕觸發(fā)事件
? cancelSelected(event) {
? ? wx.switchTab({
? ? ? url: '/pages/optional/optional',
? ? })
? },

? // 確定按鈕觸發(fā)事件
? successSelected(event) {
? ? if (!(/(^[0-9]*$)/.test(this.data.deposit))) {
? ? ? wx.showToast({
? ? ? ? title: '只能輸入純數(shù)字',
? ? ? ? icon: 'none',
? ? ? ? duration: 2000
? ? ? })
? ? } else {
? ? ? this.setData({completed: true})
? ? }
? },

})

效果圖