ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

小程序中自定义代用输入框的模态框弹窗

2021-05-31 02:02:35  阅读:183  来源: 互联网

标签:function input2 input1 自定义 hiddenModal2 输入框 data 弹窗 setData


<HTML部分-->
<button type="default" bindtap='showModal2'>弹出带文本框的modal</button>
<modal hidden="{{hiddenModal2}}" title="请完善您的个人信息" confirm-text="提交" cancel-text="取消" bindconfirm="model2confirm"
  bindcancel="model2cancel">
  <view class="loginBox">
    <view style='width:70%;margin-left:15%;'>
      <view
        style='border-top-left-radius:8px;border-top-right-radius:8px;width:100%;height:38px;display:inline-block;background:#fff;'>
        <view style='width:20%;display:inline-block;height:100%;'>
          <image src='../../images/xueyuan.svg' style='display:inline;' mode="aspectFit" style='width:60rpx;display:inline-block;height:100%;'></image>
        </view>
        <input style='width:80%;display:inline-block;height:100%;' bindinput='input1' placeholder-style='font-size:12px;'
          placeholder='学 院:'></input>
      </view>
      <view
        style='width:100%;height:38px;display:inline-block;background:#fff;margin-top:-5px;border-top:1px solid #f8f8f8;border-bottom-left-radius:8px;border-bottom-right-radius:8px;'>
        <view style='width:20%;display:inline-block;height:100%;'>
          <image src='../../images/code.svg' style='display:inline' mode="aspectFit" style='width:50rpx;display:inline-block;height:100%;'></image>
        </view>
        <input style='width:80%;display:inline-block;height:100%;' bindinput='input2' placeholder-style='font-size:12px;'
          placeholder='工 号:'></input>
      </view>
    </view>
  </view>
</modal>
js部分:
Page({
  data: {
   hiddenModal2:true,
   input1:'',
   input2:''
  },
  input1:function(e){
   this.setData({input1:e.detail.value})
  },
  input2:function(e){
    this.setData({input2:e.detail.value})
   },
  showModal2: function (e) {
   this.setData({ hiddenModal2: false })
  },
  model2confirm: function (e) {
   this.setData({ hiddenModal2: true })
   console.log(this.data.input1,this.data.input2)
  //  wx.showToast({
  //   title: '确定',
  //   icon:'none'
  //  })
  },
  model2cancel: function (e) {
   this.setData({ hiddenModal2: true })
  }
 })
 

  

标签:function,input2,input1,自定义,hiddenModal2,输入框,data,弹窗,setData
来源: https://www.cnblogs.com/gzw-23/p/14829804.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有