微信小程序弹出可填写框两种方法
方法一:
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();
}
方法一样式修改麻烦,但是代码简单
微信小程序弹出可填写框两种方法的更多相关文章
- 微信小程序--跳转页面常用的两种方法
一.bindtap="onProductsItemTap"绑定点击跳转事件 在.wxml文件中绑定 在.js文件中实现绑定事件函数 二.navigator标签配合URL跳转法 在w ...
- 微信小程序弹出操作菜单
微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...
- 微信小程序弹出层点击穿透问题
问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ...
- 微信小程序 - 弹出键盘遮挡住输入框
在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡. 如图: 以上两张图是自己工作中遇到的,此处不要着急,一个属性帮你搞定. cursor-spacing:指定光 ...
- 使用movable-view制作可拖拽的微信小程序弹出层效果。
仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...
- 微信小程序弹出层
1.消息提示 wx.showToast wx.showToast({ title: '成功', icon: 'success', duration: 2000 })2.模态弹窗 wx.show ...
- 微信小程序弹出框滚动穿透问题
1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { c ...
- 微信小程序弹出层动画特效
.rules_modal_cont{ height:800rpx; width:200rpx; -webkit-animation: showZeroAlert .3s; animation: sho ...
- 微信小程序弹出和隐藏遮罩层动画以及五星评分
参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/ ...
随机推荐
- selenium-网站demo学习-test Design-优化自动化代码
看selenium的网站的文档,里面的自动化用例设计有一些小点很靠谱.学了很多,可以用作优化自己的代码. 1.测试类型: Testing Static Content Testing Links Fu ...
- 写给IT技术爱好者的一封信
写给IT技术爱好者的一封信>当前运维素质的分析<... ---------------------- 虽相貌平平,但勤学苦练,亦收获颇丰!如果你决定要成为一名IT从业者,你需要承受以下的东 ...
- 数据库中in和exists关键字的区别
数据库中in和exists关键字的区别 in 是把外表和内表作hash join,而exists是对外表作loop,每次loop再对内表进行查询. 一直以来认为exists比in效率高的说法是不准确的 ...
- gometalinter代码质量检查分析工具(golang)
GitHub地址:https://github.com/alecthomas/gometalinter gometalinter安装和使用 1.安装 go get github.com/alectho ...
- Event Recommendation Engine Challenge分步解析第三步
一.请知晓 本文是基于: Event Recommendation Engine Challenge分步解析第一步 Event Recommendation Engine Challenge分步解析第 ...
- Java测试Junit
Junit就是做测试用的,想想平常我们是怎么测试我们的方法或者类的,是不是在main方法里面去调用?这样有缺点: 1.每次都要在main方法里面写测试,假如我要上线新系统,里面有1000个方法需要测试 ...
- 有关mysql的innodb_flush_log_at_trx_commit参数
一.参数解释 0:log buffer将每秒一次地写入log file中,并且log file的flush(刷到磁盘)操作同时进行.该模式下在事务提交的时候,不会主动触发写入磁盘的操作. 1:每次事务 ...
- 2018牛客网暑期ACM多校训练营(第九场)A -Circulant Matrix(FWT)
分析 大佬说看样例就像和卷积有关. 把题目化简成a*x=b,这是个xor的FWT. FWT的讲解请看:https://www.cnblogs.com/cjyyb/p/9065615.html 那么要求 ...
- HDU - 5119 Happy Matt Friends(dp)
题目链接 题意:n个数,你可以从中选一些数,也可以不选,选出来的元素的异或和大于m时,则称满足情况.问满足情况的方案数为多少. 分析:本来以为是用什么特殊的数据结构来操作,没想到是dp,还好队友很强. ...
- 【关键字】c++关键字
1. alignas (c++11) 设置类和struct的字节对齐方式 默认取值是: 2n : 0, 1, 2, 4 , 6, 8..... 2. alignof 区分sizeof(), alig ...