微信小程序弹出可填写框两种方法

Posted 2021-01-24 放飞的回忆

方法一：

html页面： 

< view class = "container"
class = "zn-uploadimg" > < button type = "primary"
bindtap = "modalinput" > modal有输入框 < /button> 
</view > < modal id = "modal"
hidden = "{{hiddenmodalput}}"
title = "预约信息"
confirm - text = "提交"
cancel - text = "取消"
bindcancel = "cancel"
bindconfirm = "confirm" > < input type = ‘text‘
placeholder = "姓名："
auto - focus / > < input type = ‘number‘
placeholder = "电话："
auto - focus / > < input type = ‘text‘
placeholder = "人数："
auto - focus / > < input type = ‘text‘
placeholder = "时间："
auto - focus / > < /modal>
    
js页面：

/ / 获取应用实例
var app = getApp()
Page({
    data: {
        hiddenmodalput: true,
        //可以通过hidden是否掩藏弹出框的属性，来指定那个弹出框 
    },
    //点击按钮痰喘指定的hiddenmodalput弹出框 
    modalinput: function() {
        this.setData({
            hiddenmodalput: !this.data.hiddenmodalput
        })
    },
    //取消按钮 
    cancel: function() {
        this.setData({
            hiddenmodalput: true
        });
    },
    //确认 
    confirm: function() {
        this.setData({
            hiddenmodalput: true
        })
    }
})

方法二：

html页面： 

< button class = "show-btn"
bindtap = "showDialogBtn" > 弹窗 < /button> 
<!--弹窗-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view > < view class = "modal-dialog"
wx: if = "{{showModal}}" > < view class = "modal-title" > 预约信息 < /view>
<view class="modal-content">
<view class="modal-input">
<input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="姓名"></input > < /view>
<view class="modal-input">
<input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="电话"></input > < /view>
<view class="modal-input">
<input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="人数"></input > < /view>
<view class="modal-input">
<input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="时间"></input > < /view>
</view > < view class = "modal-footer" > < view class = "btn-cancel"
bindtap = "onCancel"
data - status = "cancel" > 取消 < /view>
<view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view > < /view>
</view > 

css页面：
/**index.wxss**/
.show - btn {
    margin - top: 100rpx;
    color: #22cc22;
}
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: # 000;
    opacity: 0.5;
    overflow: hidden;
    z - index: 9000;
    color: #fff;
}.modal - dialog {
    width: 540rpx;
    overflow: hidden;
    position: fixed;
    top: 50 % ;
    left: 0;
    z - index: 9999;
    background: #fff;
    margin: -180rpx 105rpx;
    border - radius: 36rpx;
}.modal - title {
    padding - top: 50rpx;
    font - size: 36rpx;
    color: #030303;
text-align: center;
}
.modal-content {
padding: 50rpx 32rpx;
}
.modal-input {
display: flex;
background: # fff;
    border - bottom: 2rpx solid# ddd;
    border - radius: 4rpx;
    font - size: 28rpx;
}.input {
    width: 100 % ;
    height: 82rpx;
    font - size: 28rpx;
    line - height: 28rpx;
    padding: 0 20rpx;
    box - sizing: border - box;
    color: #333;
}
input-holder {
color: # 666;
    font - size: 28rpx;
}.modal - footer {
    display: flex;
    flex - direction: row;
    height: 86rpx;
    border - top: 1px solid# dedede;
    font - size: 34rpx;
    line - height: 86rpx;
}.btn - cancel {
    width: 50 % ;
    color: #666;
text-align: center;
border-right: 1px solid # dedede;
}.btn - confirm {
    width: 50 % ;
    color: #ec5300;
    text - align: center;
}

js页面：
/**
 * 弹窗
 */
showDialogBtn: function() {
    this.setData({
        showModal: true
    })
},
/**
 * 弹出框蒙层截断touchmove事件
 */
preventTouchMove: function() {},
/**
 * 隐藏模态对话框
 */
hideModal: function() {
    this.setData({
        showModal: false
    });
},
/**
 * 对话框取消按钮点击事件
 */
onCancel: function() {
    this.hideModal();
},
/**
 * 对话框确认按钮点击事件
 */
onConfirm: function() {
    wx.showToast({
        title: ‘提交成功‘,
        icon: ‘success‘,
        duration: 2000
    })
    this.hideModal();
}

 

方法一样式修改麻烦，但是代码简单