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
版权声明:本文为baidu_38978508原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。