微信小程序开发弹出框实现方法

本文主要和大家分享微信小程序开发弹出框实现方法，本文所分享的代码很清晰，希望能帮助到大家。

 view >
1.消息提示——wx.showToast(OBJECT)
//show.js
//获取应用实例 
var app = getApp() 
Page({
 showok:function() {
 wx.showToast({
 title: #39;成功 #39;,
 icon: #39;success #39;,
 duration: 2000
})
 br/ 2.模态弹窗——wx.showModal(OBJECT)
 br/ 
 br/ 
//show.js
//获取应用实例 
var app = getApp() 
Page({
 modalcnt:function(){
 wx.showModal({
 title: #39;提示 #39;,
 content: #39;这是一个模态弹窗 #39;,
 success: function(res) {
 if (res.confirm) {
 console.log( #39;用户点击确定 #39;)
 } else if (res.cancel) {
 console.log( #39;用户点击取消 #39;)
})
 br/ 
 br/ 
3.操作菜单——wx.showActionSheet(OBJECT) br/ 
 br/ 
 br/ 
 br/ 
//show.js
//获取应用实例 
var app = getApp() 
Page({
 actioncnt:function(){
 wx.showActionSheet({
 itemList: [ #39;A #39;, #39;B #39;, #39;C #39;],
 success: function(res) {
 console.log(res.tapIndex)
 fail: function(res) {
 console.log(res.errMsg)
})
 br/ 
 br/ 
4.指定modal弹出
 br/ 
 指定哪个modal,可以通过hidden属性来进行选择。
 br/ 
 !--show.wxml-- 
 view >
//show.js 
//获取应用实例 
var app = getApp() 
Page({
 data:{
 hiddenmodalput:true,
 //可以通过hidden是否掩藏弹出框的属性，来指定那个弹出框
 //点击按钮痰喘指定的hiddenmodalput弹出框
 modalinput:function(){
 this.setData({
 hiddenmodalput: !this.data.hiddenmodalput
 //取消按钮
 cancel: function(){
 this.setData({
 hiddenmodalput: true
 //确认
 confirm: function(){
 this.setData({
 hiddenmodalput: true
})

相关推荐：
如何用JQuery写出登录弹出框
推荐10款实现弹出框特效（收藏）
分享HTML5实现弹出框的效果示例
以上就是微信小程序开发弹出框实现方法的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！