微信小程序开发—(五)弹出框

时间:2024-10-09 07:48:55

 

  1. <span style="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.消息提示——(OBJECT)

 

  1. <span style="color:#333333">//
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5. showok:function() {
  6. ({
  7. title: '成功',
  8. icon: 'success',
  9. duration: 2000
  10. })
  11. }
  12. })
  13. </span>


2.模态弹窗——(OBJECT)

 

 

 

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

 
 
3.操作菜单——(OBJECT)
 
  1. //
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5. actioncnt:function(){
  6. ({
  7. itemList: ['A', 'B', 'C'],
  8. success: function(res) {
  9. ()
  10. },
  11. fail: function(res) {
  12. ()
  13. }
  14. })
  15. }
  16. })

 
 
4.指定modal弹出
   指定哪个modal,可以通过hidden属性来进行选择。
 
  1. <!---->
  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>

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