小程序实现弹出输入框

微信自带组件

样式：

wxml

拒绝

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) | 微信开放文档

自定义组件

样式：

wxml

拒绝                                                                                                                                                  取消                                                      确定                                          

 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,    })   },})

多文本框

样式：

 wxml

修改          修改信息                  报修人员:                            联系电话:                            维修产品:                            故障类型:                            故障地点:                            故障描述:                      确定    

wxss

.drawer_screen {  width: 100%;  height: 100%;  position: fixed;  top: 0;  left: 0;  z-index: 1000;  background: #000;  opacity: 0.5;  overflow: hidden;}.animation_position{  display: flex;  width:100%;  justify-content: center;}.drawer_box{  overflow: hidden;  position: fixed;    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      });    }  },})

来源地址：https://blog.csdn.net/weixin_46001736/article/details/127651754