微信小程序弹框之获取输入内容（2）

1：通过其它打卡绑定函数toClock4
toClock4 触发弹框

 <view class="footer">
        <button bindtap="toClock4">其它打卡</button>
    </view>

2：准备model模块
model放在需要触发按钮同样的文件wxxml即可

<modal hidden="{{hiddenmodalput}}" title="打卡内容" confirm-text="提交" cancel-text="取消" bindcancel="cancel" bindconfirm="confirm">
     <input type='text'  value="{{num}}"      bindinput='input'  auto-focus/>
 </modal>

hidden=“{{hiddenmodalput}}”
hiddenmodalput这个控制弹框显示或消失
bindinput='input’绑定的是获取输入内容的函数
默认消失也就是关闭的，所以在js文件data设置

data: {
    hiddenmodalput:true
  },

input即显示文件内容
3：toClock4函数
toClock4函数触发弹框，输入自己想输入内容

 //弹框
  toClock(e){
 var that=this
    that.setData({
      hiddenmodalput: !this.data.hiddenmodalput
   })
  },

4：input函数
input函数即获取输入文本的内容
tencent也放在data里边

data: {
    hiddenmodalput:true,
    tencent:null
  },

获取数据成功

 input:function(e){
      var that=this
      that.data.tencent=e.detail.value
    console.log("打卡内容"+that.data.tencent)
    
  },

5：确认和取消
点击会实现弹框的消失（想实现更多的内容可在取消确认自己写函数）
ex：在我的例子中就是实现获取最终内容跳转到打卡页面（在确认函数实现）

       //取消按钮
 cancel: function(){
    this.setData({
        hiddenmodalput: true
    });
  },
  //确认
  confirm: function(e){
     var that=this
     console.log("最终数据"+that.data.tencent)
     var t=5
     wx.navigateTo({
       
        url: '../chongzhi/chongzhi?type=' + t + '&tencent=' + that.data.tencent,
        
          })
    this.setData({
      hiddenmodalput: true
  });
  },

关于微信弹框更多知识微信搜索公众号：小白XBIT

微信小程序弹框显示自定义内容（1）