微信小程序弹出框详解


[html]  view plain  copy
  1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container" class="zn-uploadimg">  
  2.     <button type="primary"bindtap="showok">消息提示框</button>   
  3.     <button type="primary"bindtap="modalcnt">模态弹窗</button>   
  4.     <button type="primary"bindtap="actioncnt">操作菜单</button>   
  5. </view></span>  

1.消息提示——wx.showToast(OBJECT)


[html]  view plain  copy
  1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">//show.js  
  2. //获取应用实例    
  3. var app = getApp()    
  4. Page({  
  5.     showok:function() {  
  6.         wx.showToast({  
  7.             title: '成功',  
  8.             icon: 'success',  
  9.             duration: 2000  
  10.         })  
  11.     }  
  12. })  
  13. </span>  

2.模态弹窗——wx.showModal(OBJECT)



[html]  view plain  copy
  1. //show.js  
  2. //获取应用实例    
  3. var app = getApp()    
  4. Page({  
  5.     modalcnt:function(){  
  6.         wx.showModal({  
  7.             title: '提示',  
  8.             content: '这是一个模态弹窗',  
  9.             success: function(res) {  
  10.                 if (res.confirm) {  
  11.                 console.log('用户点击确定')  
  12.                 } else if (res.cancel) {  
  13.                 console.log('用户点击取消')  
  14.                 }  
  15.             }  
  16.         })  
  17.     }  
  18. })  




3.操作菜单——wx.showActionSheet(OBJECT)


[html]  view plain  copy
  1. //show.js  
  2. //获取应用实例    
  3. var app = getApp()    
  4. Page({  
  5.     actioncnt:function(){  
  6.         wx.showActionSheet({  
  7.             itemList: ['A', 'B', 'C'],  
  8.             success: function(res) {  
  9.                 console.log(res.tapIndex)  
  10.             },  
  11.             fail: function(res) {  
  12.                 console.log(res.errMsg)  
  13.             }  
  14.         })  
  15.     }  
  16. })  




4.指定modal弹出

   指定哪个modal,可以通过hidden属性来进行选择。

[html]  view plain  copy
  1. <!--show.wxml-->  
  2. <view class="container" class="zn-uploadimg">  
  3.     <button type="primary"bindtap="modalinput">modal有输入框</button>   
  4. </view>  
  5. <modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">  
  6.     <input type='text'placeholder="请输入内容" auto-focus/>  
  7. </modal>  


[html]  view plain  copy
  1. //show.js   
  2. //获取应用实例    
  3. var app = getApp()    
  4. Page({  
  5.     data:{  
  6.         hiddenmodalput:true,  
  7.         //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框  
  8.     },  
  9.     //点击按钮痰喘指定的hiddenmodalput弹出框  
  10.     modalinput:function(){  
  11.         this.setData({  
  12.            hiddenmodalput: !this.data.hiddenmodalput  
  13.         })  
  14.     },  
  15.     //取消按钮  
  16.     cancel: function(){  
  17.         this.setData({  
  18.             hiddenmodalput: true  
  19.         });  
  20.     },  
  21.     //确认  
  22.     confirm: function(){  
  23.         this.setData({  
  24.             hiddenmodalput: true  
  25.         })  
  26.     }  
  27.       
  28. })  


原文地址http://blog.csdn.net/gao_xu_520/article/details/71084162?locationNum=1&fps=1
  • 27
    点赞
  • 132
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值