使用微信小程序开发弹出框应用实例详解

view class=' container ' class=' Zn-uploadimg ' button type=' primary ' bind tap=' showok '消息提示框/button button type=' primary ' bind tap=' modal nt '模态弹窗/button button type=' primary ' bind tap=' action CNT '操作菜单/按钮/视图1 .消息提示——wx.showToast(对象)

//show.js//获取应用实例var app=GetApp()Page({ showok : function(){ wx。showToast({ title : ')成功，icon: "成功"，持续时间： 2000 })}))

2.模态弹窗显示模式（对象)

//show.js//获取应用实例var app=GetApp()Page({ showok : function(){ wx。showToast({ title : ')成功，icon: "成功"，持续时间： 2000 })}))

//show.js//获取应用实例var app=GetApp()Page({ modlnt : function(){ wx。显示模式({ title : ')提示，content: '这是一个模态弹窗，成功：函数如果确认控制台。日志('用户点击确定)} else if(RES . cancel){ console。日志('用户点击取消)} } })}))))(9504 . 163.com)

3.操作菜单——wx.showActionSheet(对象)

//show.js//获取应用实例var app=GetApp()Page({ action CNT : function(){ wx。showactionsheet({项目列表：[' A '，' B '，' C']，成功3360函数(RES){控制台。日志(RES . tapindex)}，失败：函数(RES){控制台。日志(RES . errmsg)} })})

4.指定情态的弹出

指定哪个莫代尔，可以通过隐藏的属性来进行选择。

！-表演。wxml-view类=' container '类=' Zn-uploadimg '按钮类型=' primary ' bind tap=' modalinput '模式有输入框/button/view model hidden=' { { hiddenmodalput } } ' title='请输入验证码确认-文本='提交取消-文本='重置绑定取消='取消'绑定确认='确认'输入类型='text '占位符='请输入内容自动对焦//模式//show.js //获取应用实例var app=GetApp()Page({ data : { hiddenmodalput : true，//可以通过隐藏的是否掩藏弹出框的属性，来指定那个弹出框},//点击按钮痰喘指定的hiddenmodalput弹出框modalinput :函数(){ this。setdata({ hiddenmodalput :this.data.hiddenmodalput})}，//取消按钮取消：函数(){这个。setdata({ hiddenmodalput : true })；}, //确认确认：函数(){这个。setdata({ hiddenmodalput : true })} })(9508 . 163.com)

总结

以上所述是小编给大家介绍的使用微信小程序开发弹出框应用实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！