小程序实现弹出输入框

article/2025/9/21 9:21:19

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 = thisthat.setData({isShowConfirm: false,})},//点击确认按钮confirmAcceptance:function(){var that = thisthat.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.valueconsole.log("name", name)},phone(event) { //获取手机号phone = event.detail.valueconsole.log("phone", phone)},product(event) { //维修产品product = event.detail.valueconsole.log("produc", product)},type(event) { //故障类型type = event.detail.valueconsole.log("type", type)},address(event) { //地址address = event.detail.valueconsole.log("address", address)},description(event) { //描述description = event.detail.valueconsole.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});}},
})


http://chatgpt.dhexx.cn/article/iM3F85eZ.shtml

相关文章

微信小程序提示弹窗大全

微信小程序提示弹窗大全

wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明&#xff1a; 示例代码&#xff1a; ? 1 2 3 4 5 wx.showToast({ title: 成功 , icon: success , duration: 2000 }) wx.hideToast() 隐藏消息提示框 ? 1 2 3 4 5 6 7 8 9 wx.showToast({ title: 加载中 , icon: lo…
阅读更多...
微信小程序 四种弹窗方式

微信小程序 四种弹窗方式

微信小程序弹窗 一、wx.showToast(Object object)二 、wx.showModal(Object object)三、wx.showLoading(Object object)四、wx.showActionSheet(Object object)五、官方文档 一、wx.showToast(Object object) 显示消息提示框 wx.showToast({title: 内容, //提示的内容duration…
阅读更多...
微信小程序弹出框详解

微信小程序弹出框详解

[html] view plain copy <span style"font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class"container" class"zn-uploadimg"> <button type"primary"bindtap"showok">消息提示…
阅读更多...
微信小程序几种常用弹窗提示

微信小程序几种常用弹窗提示

第一种&#xff1a;弹出提示框&#xff0c;可以选择确定或者取消。 代码&#xff1a;wx.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) {//这里是点击了确定以后console.log(用户点击确定)} else {//这里是点击了取消以后conso…
阅读更多...
微信小程序几种常用弹窗提示方法

微信小程序几种常用弹窗提示方法

1.提示文字 可以设置显示时间&#xff08;仅提示时使用&#xff09;duration设置时间 不显示icon&#xff0c;此时 title文字最多可显示两行 也可以显示icon&#xff0c;显示icon文字最多显示 7 个汉字长度 icon常用的有&#xff1a;success、error、loading wx.showToast(…
阅读更多...
微信小程序展示弹窗的方式

微信小程序展示弹窗的方式

微信小程序中展示弹窗有四种方式&#xff1a;wx.showToast、wx.showModal、wx.showLoading、wx.showActionSheet 具体参数可参照微信开发文档 1. wx.showToast <!-- index.wxml --> <!-- wx.showToast(消息提示框) --> <button bindtap"handleShowToast&…
阅读更多...
微信小程序之弹出框

微信小程序之弹出框

微信小程序中toast消息提示框只有两种显示的效果&#xff0c;就是成功和加载&#xff0c;使用wx.showToast(OBJECT)。 看下有关参数说明&#xff1a; 代码很简单&#xff1a; wx.showToast({title: 成功,icon: succes,duration: 1000,mask:true}) mask属性好像并没有起作用。有…
阅读更多...
微信小程序弹窗

微信小程序弹窗

微信小程序自定义底部、顶部、中间、左边、右边弹窗 简单的微信小程序弹窗功能&#xff0c;具体实现过程&#xff0c;请浏览代码。 顶部弹出窗图例&#xff1a; 中间弹出窗图例&#xff1a; 底部弹出窗图例&#xff1a; 左边弹出窗图例&#xff1a; 右边弹出窗图例&#x…
阅读更多...
微信小程序弹窗提示怎么写

微信小程序弹窗提示怎么写

第一种&#xff1a;弹出提示框&#xff0c;可以选择确定或者取消。 代码&#xff1a; wx.showModal({ title: 提示, content: 这是一个模态弹窗, success: function (res) { if (res.confirm) {//这里是点击了确定以后 console.log(用户点击…
阅读更多...
微信小程序的弹窗提示

微信小程序的弹窗提示

第一种&#xff1a;弹出提示框&#xff0c;用户可以选择确定或者取消&#xff0c;且都带有回调。 wx.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) { //这里是点击了确定以后console.log(用户点击确定)} else { //这里是点击了…
阅读更多...
CSS中水平居中、垂直居中和水平同时垂直居中

CSS中水平居中、垂直居中和水平同时垂直居中

1.水平居中 2.垂直居中 3.水平并垂直居中 flex布局用到父元素上&#xff0c;绝对定位用到子元素上。
阅读更多...
HTML/CSS：图片居中(水平居中和垂直居中)

HTML/CSS：图片居中(水平居中和垂直居中)

css图片居中分css图片水平居中和垂直居中两种情况&#xff0c;有时候还需要图片同时水平垂直居中。 css图片水平居中 1.利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下&#xff1a; <div style"text-…
阅读更多...
前端|如何让一个元素水平居中/垂直居中？

前端|如何让一个元素水平居中/垂直居中？

不知道你们是否有这样的体验&#xff0c;水平居中在前端中经常使用&#xff0c;但是&#xff01;&#xff01;&#xff01;每次一用就各种不起作用。各种justify-content,align-item,text-align,margin&#xff0c;经过种种尝试之后&#xff0c;终于能够居中了&#xff0c;但下…
阅读更多...
微信小程序元素水平居中或垂直居中

微信小程序元素水平居中或垂直居中

.wxml<view class"father"> <view class"children1">子元素1</view> <view class"children2">子元素2</view> <view class"children3">子元素3</view> </view>.wxss.father{display:…
阅读更多...
【CSS】元素居中总结-水平居中、垂直居中、水平垂直居中

【CSS】元素居中总结-水平居中、垂直居中、水平垂直居中

【CSS】元素居中 一、 水平居中1.行内元素水平居中&#xff08;1&#xff09;text-align 2.块级元素水平居中2.1 margin&#xff08;1&#xff09;margin 2.2布局&#xff08;1&#xff09;flex justify-content&#xff08;推荐&#xff09;&#xff08;2&#xff09; flexmar…
阅读更多...
关于照片（img）的水平居中和垂直居中

关于照片（img）的水平居中和垂直居中

本文主要是讲述照片&#xff08;img&#xff09;的水平居中和垂直居中&#xff0c;但是其他元素的水平居中和垂直居中也可借鉴此文。 水平居中&#xff1a; 1.将img元素设置成块级元素 img {display: block;margin: 0 auto;} 2.flex布局 .box1 {width: 100px;height: 100p…
阅读更多...
margin 实现水平居中，垂直居中

margin 实现水平居中，垂直居中

首先了解下&#xff0c;margin的auto属性的作用是用来分配剩余空间&#xff0c;所以对于有剩余空间的元素才有效哦&#xff08;块及元素&#xff09;。比如图片设置margin: 0 auto是无效的&#xff0c;因为图片是内联元素&#xff0c;不是占一整行&#xff0c;没有剩余空间。 1…
阅读更多...
让div在屏幕中居中（水平居中+垂直居中）的几种方法

让div在屏幕中居中（水平居中+垂直居中）的几种方法

这里是修真院前端小课堂&#xff0c;本篇分析的主题是 【让div在屏幕中居中&#xff08;水平居中垂直居中&#xff09;的几种方法】 水平居中方法: 1.inline&#xff0c;inline-block元素的水平居中&#xff0c;在父级块级元素中设置text-align:center; 2.确定宽度的块级元素…
阅读更多...
CSS布局对齐方式--水平居中、垂直居中、水平垂直居中

CSS布局对齐方式--水平居中、垂直居中、水平垂直居中

前言&#xff1a;在网页布局中&#xff0c;经常遇到需要使元素居中对齐的时候&#xff0c;居中对齐的方式有&#xff1a;水平居中、垂直居中和水平垂直居中。这次&#xff0c;借此回顾总结一下&#xff0c;并在此记录下相关内容。 一、水平居中&#xff1a; &#xff08;1&…
阅读更多...
CSS水平居中+垂直居中+水平/垂直居中的方法总结

CSS水平居中+垂直居中+水平/垂直居中的方法总结

目录 水平居中 行内元素 块级元素 方案一&#xff1a;(分宽度定不定两种情况) 方案二&#xff1a;使用定位属性 方案三&#xff1a;使用flexbox布局实现&#xff08;宽度定不定都可以&#xff09; 垂直居中 单行的行内元素 多行的行内元素 块级元素 水平垂直居中 已…
阅读更多...
推荐文章

Copyright @ 2022~2023