脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序弹出输入框

微信小程序实现弹出输入框代码实例

 更新时间：2023年09月08日 08:51:59   作者：雯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
      });
    }
  },
})

总结 

到此这篇关于微信小程序实现弹出输入框的文章就介绍到这了,更多相关小程序弹出输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript实现页面中录音功能的方法

    JavaScript实现页面中录音功能的方法

    这篇文章主要给大家介绍了关于JavaScript实现页面中录音功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JS图像无缝滚动脚本非常好用

    JS图像无缝滚动脚本非常好用

    最好用的JS图像无缝滚动脚本，根据需要改改宽度和图像个数就可以了,需要的朋友可以参考下
    2014-02-02
  • 微信小程序实现弹框效果

    微信小程序实现弹框效果

    这篇文章主要为大家详细介绍了微信小程序实现弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • js与jquery获取父级元素,子级元素,兄弟元素的实现方法

    js与jquery获取父级元素,子级元素,兄弟元素的实现方法

    本篇文章主要是对js与jquery获取父级元素,子级元素,兄弟元素的实现方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • 详解JavaScript什么情况下不建议使用箭头函数

    详解JavaScript什么情况下不建议使用箭头函数

    箭头函数作为ES6新增的语法，在使用时不仅能使得代码更加简洁，而且在某些场景避免this指向问题。但是箭头函数不是万能的，也有自己的缺点以及不适用的场景，本文总结了JavaScript什么情况下不建议使用箭头函数，感兴趣的可以了解一下
    2022-06-06
  • 小程序input数据双向绑定实现方法

    小程序input数据双向绑定实现方法

    这篇文章主要介绍了小程序input数据双向绑定实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • JavaScript高仿支付宝倒计时页面及代码实现

    JavaScript高仿支付宝倒计时页面及代码实现

    在支付宝上我们经常会见到支付宝倒计时功能，倒计时应用非常广泛，下文给大家介绍js制作支付宝倒计时功能，但是里面涉及到，倒计时，弹框，以及字体图的相关知识，感兴趣的朋友一起看看吧
    2016-10-10
  • javascript 封装的一个实用的焦点图切换效果

    javascript 封装的一个实用的焦点图切换效果

    之前有一篇博客，实用的焦点图切换效果，结构行为相分离 解释的比较详细，脚本是分离式的，但在易用性和重用性方面并不理想，这里原作者进行了，优化。
    2010-07-07
  • JavaScript数据类型和变量_动力节点Java学院整理

    JavaScript数据类型和变量_动力节点Java学院整理

    这篇文章主要为大家详细介绍了JavaScript数据类型和变量的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • javascript将DOM节点添加到文档的方法实例分析

    javascript将DOM节点添加到文档的方法实例分析

    这篇文章主要介绍了javascript将DOM节点添加到文档的方法,对比分析了javascript的两种节点创建的方法,涉及javascript节点操作及运行时间计算的相关技巧,需要的朋友可以参考下
    2015-08-08

最新评论