微信小程序实现弹出输入框代码实例
作者:雯0609~
最近在写一个微信小程序,有一个需求是点击一个按钮后,出现一个输入框,然后根据用户的输入再进行操作,所以这篇文章主要给大家介绍了关于微信小程序实现弹出输入框的相关资料,需要的朋友可以参考下
1.微信自带组件
样式:
wxml
<view class="close" bindtap="close">拒绝</view>
js
Page({ //拒绝 close(e) { wx.showModal({ editable:true,//显示输入框 placeholderText:'输入拒绝原因',//显示输入框提示信息 success: res => { if (res.confirm) { //点击了确认 console.log(res.content)//用户输入的值 } else { console.log('用户点击了取消') } } }) }, })
详见:wx.showModal(Object object) | 微信开放文档
2.自定义组件
样式:
wxml
<view class="close" bindtap="close">拒绝</view><!--点击拒绝弹出--> <block wx:if="{{isShowConfirm}}"> <view class='toast-box'> <view class='toastbg'></view> <view class='showToast'> <view class='toast-main'> <view class='toast-input'> <input type='text' bindinput='setValue' placeholder="请输入拒绝原因" data-name='stuEidtName'></input> </view> </view> <view class='toast-button'> <view class='button1'> <view catchtap='cancel'>取消</view> </view> <view class='button2'> <view catchtap='confirmAcceptance'>确定</view> </view> </view> </view> </view> </block>
wxss
/* 弹出窗 */ .toast-box { width: 100%; height: 100%; opacity: 1; position: fixed; top: 0px; left: 0px; } .toastbg { opacity: 0.5; background-color: black; position: absolute; width: 100%; min-height: 100vh; } .showToast { position: absolute; opacity: 1; width: 80%; margin-left: 10%; margin-top: 70%; } .toast-main { padding-top: 2vh; padding-bottom: 2vh; background-color: white; text-align: center; border-top-left-radius: 16rpx; border-top-right-radius: 16rpx; } .toast-input { margin-left: 5%; margin-right: 5%; margin-top:10%; margin-bottom:10%; background-color: rgb(240, 240, 240); padding-left: 2vh; padding-right: 2vh; padding-top: 1vh; padding-bottom: 1vh; } .toast-input input{ background-color: rgb(240, 240, 240); } .toast-button { display: flex; background-color: white; height:50px; width:100%; border-radius: 0px; border-bottom-left-radius: 16rpx; border-bottom-right-radius: 16rpx; border-top:1px solid rgb(211, 211, 211); } .button1 { width: 50%; display: flex; align-items: center; justify-content: center; border-radius: 0px; border-bottom-left-radius: 16rpx; } .button2 { width: 50%; border-left:1px solid rgb(211, 211, 211); display: flex; align-items: center; justify-content: center; color:#40A4D6; }
js
Page({ data: { isShowConfirm:false }, //输入框中的值 setValue: function (e) { this.setData({ walletPsd: e.detail.value }) }, //点击取消按钮 cancel: function () { var that = this that.setData({ isShowConfirm: false, }) }, //点击确认按钮 confirmAcceptance:function(){ var that = this that.setData({ isShowConfirm: false, }) }, //拒绝 close(e) { this.setData({ isShowConfirm: true, }) }, })
3.多文本框
样式:
wxml
<view class="update" bindtap="update" data-statu="open">修改</view> <!--弹出框--> <view class="drawer_screen" bindtap="update" data-statu="close" wx:if="{{showModalStatus}}"></view> <!--content--> <!--使用animation属性指定需要执行的动画--> <view class="animation_position"> <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> <!--drawer content--> <view class="drawer_title">修改信息</view> <view class="drawer_content"> <view class="grid"> <label class="title col-0">报修人员:</label> <input class="input_base input_h30 col-1" bindblur="name" placeholder="请输入报修人员姓名"></input> </view> <view class="grid"> <label class="title col-0">联系电话:</label> <input class="input_base input_h30 col-1" bindblur="phone" placeholder="请输入报修人员电话"></input> </view> <view class="grid"> <label class="title col-0">维修产品:</label> <input class="input_base input_h30 col-1" bindblur="product" placeholder="请输入维修产品名称"></input> </view> <view class="grid"> <label class="title col-0">故障类型:</label> <input class="input_base input_h30 col-1" bindblur="type" placeholder="请输入故障类型"></input> </view> <view class="bottom grid"> <label class="title col-0">故障地点:</label> <input class="input_base input_h30 col-1" bindblur="address" placeholder="请输入地点"></input> </view> <view class="bottom grid"> <label class="title col-0">故障描述:</label> <input class="input_base input_h30 col-1" bindblur="description" placeholder="请输入故障描述"></input> </view> </view> <view class="btn_ok" bindtap="update" data-statu="close">确定</view> </view> </view>
wxss
/* 隐藏内容样式 */ /*mask*/ .drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden; } /*content*/ .animation_position{ display: flex; width:100%; justify-content: center; } .drawer_box{ overflow: hidden; position: fixed; /* top:80px; */ bottom:90px; z-index: 1001; background: #FAFAFA; border-radius: 3px; width: 90%; } .drawer_title { padding: 15px; font: 20px "microsoft yahei"; text-align: center; } .drawer_content { overflow-y: scroll; /*超出父盒子高度可滚动*/ } .btn_ok { margin-top:5%; padding: 10px; font: 20px "microsoft yahei"; text-align: center; border-top: 1px solid #E8E8EA; color: #40A4D6; } .bottom { padding-bottom: 8px; } .title { display: flex; align-items: center; justify-content: center; width: 25%; margin:5% 0 0 0; border-bottom: 2rpx solid #ccc; } .input_base { width:75%; margin:5% 0 0 0; padding-left:5%; border-bottom: 2rpx solid #ccc; } input { font: 15px "microsoft yahei"; background: #fff; color: #000; } .grid { display: flex; margin:20px; }
js
const app = getApp() let id = '' let name = '' let phone = '' let product = '' let type = '' let address = '' let description = '' Page({ data: { showModalStatus: false, }, //信息修改 //获取用户输入信息 name(event) { //获取报修人员姓名 name = event.detail.value console.log("name", name) }, phone(event) { //获取手机号 phone = event.detail.value console.log("phone", phone) }, product(event) { //维修产品 product = event.detail.value console.log("produc", product) }, type(event) { //故障类型 type = event.detail.value console.log("type", type) }, address(event) { //地址 address = event.detail.value console.log("address", address) }, description(event) { //描述 description = event.detail.value console.log("description", description) }, update: function (e) { var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu) }, util: function (currentStatu) { /* 动画部分 */ // 第1步:创建动画实例 var animation = wx.createAnimation({ duration: 200, //动画时长 timingFunction: "linear", //线性 delay: 0 //0则不延迟 }); // 第2步:这个动画实例赋给当前的动画实例 this.animation = animation; // 第3步:执行第一组动画 animation.opacity(0).rotateX(-100).step(); // 第4步:导出动画对象赋给数据对象储存 this.setData({ animationData: animation.export() }) // 第5步:设置定时器到指定时候后,执行第二组动画 setTimeout(function () { // 执行第二组动画 animation.opacity(1).rotateX(0).step(); // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象 this.setData({ animationData: animation }) //关闭 if (currentStatu == "close") { this.setData({ showModalStatus: false }); } }.bind(this), 200) // 显示 if (currentStatu == "open") { this.setData({ showModalStatus: true }); } }, })
总结
到此这篇关于微信小程序实现弹出输入框的文章就介绍到这了,更多相关小程序弹出输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!