微信小程序弹框之获取输入内容（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=thisthat.setData({hiddenmodalput: !this.data.hiddenmodalput})},

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

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

获取数据成功

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

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

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

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

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

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

微信小程序提示框且能输入文本
微信小程序里,自定义的提示框,能够输入文本链接:https://pan.baidu.com/s/1W0maMJbP6H5VHjUQ3CvYLg?pwd=fvv2 提取码:fvv2 提取上面的文档, ...
微信小程序input框输入值获取
提交表单时获取输入框的值 wxml <view><form bindsubmit="submi ...
微信小程序弹框禁止下面的页面滚动
一句话搞定: catchtouchmove="true" <view class="mark" wx:if='{{show}}' catchtouchmo ...
微信小程序弹框组件封装
popup组件,居中和底部弹起 1.popup.wxml <view class="popup-common fade-in-linear-enter-active {{ flag ? ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
微信小程序提示框提示
微信小程序提示框很常见,有的项目弹出提示选择关闭的时候需要不再弹出,清理缓存的时候才弹出. var s = wx.getStorageSync('sh')if (s == '') {// s= tru ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
微信小程序创建节点选择器获取宽高wx.createSelectorQuery
微信小程序提供了一个获取节点宽高等信息的方法,一共是两步. 1.在对应的节点上定义一个id <image src='{{imgUrl}}' class="look-image" ...

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

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

最新文章

热门文章