码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2018-12-03 12:48:44      阅读:495      评论:0      收藏:0      [点我收藏+]

标签:lse   应用   demo   btn   display   row   dialog   color   微信   

方法一:

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

 

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

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

标签:lse   应用   demo   btn   display   row   dialog   color   微信   

原文地址:https://www.cnblogs.com/ziyoublog/p/10057600.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!