小程序弹出框详解

qjlx: function() {
    var itemList = [\'病假\', \'事假\'];
    wx.showActionSheet({
      itemList: itemList,
      success: function(res) {
        console.log(res);
        console.log(itemList[res.tapIndex]);
      },
      fail: function(res) {
        console.log(res.errMsg);
      }
    })
  },

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

//获取应用实例    
var app = getApp()    
Page({  
    actioncnt:function(){  
        wx.showActionSheet({  
            itemList: [\'A\', \'B\', \'C\'],  
            success: function(res) {  
                console.log(res.tapIndex)  
            },  
            fail: function(res) {  
                console.log(res.errMsg)  
            }  
        })  
    }  
})  

弹出框

<view class=\'item\'>
    登录密码
    <view class=\'bk\'>
      <input class="textarea" placeholder="{{password}}" value=\'{{password}}\' bindinput="password" maxlength=\'100\' auto-height disabled/>
    </view>

    <button class=\'btn\' bindtap=\'dlmm\'>修改</button>
    <modal hidden="{{hiddenmodalput}}" title="修改密码" confirm-text="提交" cancel-text="取消" bindcancel="cancelM" bindconfirm="confirmM">
      <input bindinput=\'ipsd\' type=\'text\' placeholder="请输入原密码..." auto-focus/>
      <input bindinput=\'newipsd\' type=\'password\' placeholder="请输入新密码..." />
    </modal>

  </view>

// js
// 获取登录密码:
  password: function(e) {
    this.setData({
      password: e.detail.value,
    })
    console.log("获取登录密码:" + this.data.password);
  },
// 修改登录密码
  dlmm: function(e) {
    this.setData({
      hiddenmodalput: !this.data.hiddenmodalput
    })
  },
  cancelM: function(e) {
    this.setData({
      hiddenmodalput: true,
    })
  },

  confirmM: function(e) {
    var that = this;
    console.log("原密码" + that.data.psd + "新密码" + that.data.newpsd);
    that.setData({
      hiddenmodalput: true,
    })
    wx.request({
      url: \'\',
      method: \'POST\',
      header: {
        \'Authorization\': \'Bearer\' + wx.getStorageSync(\'token\'),
      },
      success(res) {
        if (res.data.code == 0) {
          wx.showToast({
            title: \'保存失败\',
            icon: \'success\',
            duration: 500
          })
        } else {
          that.getShowToast();
        }
      }
    })
  },

  ipsd: function(e) {
    this.setData({
      psd: e.detail.value
    })
  },
  newipsd: function(e) {
    this.setData({
      newpsd: e.detail.value
    })
  },

指定modal弹出

<!--show.wxml-->  
<view class="container" class="zn-uploadimg">  
    <button type="primary"bindtap="modalinput">modal有输入框</button>   
</view>  
<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">  
    <input type=\'text\'placeholder="请输入内容" auto-focus/>  
</modal> 

//获取应用实例    
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  
        })  
    }  
      
})  

//获取应用实例  
var app = getApp()  
Page({
	actioncnt:function(){
		wx.showActionSheet({
			itemList: [\'A\', \'B\', \'C\'],
			success: function(res) {
				console.log(res.tapIndex)
			},
			fail: function(res) {
				console.log(res.errMsg)
			}
		})
	}
})

<!--.wxml-->
<view class="container" class="zn-uploadimg">
    <button type="primary"bindtap="modalinput">modal有输入框</button> 
</view>
<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
    <input type=\'text\'placeholder="请输入内容" auto-focus/>
</modal>

//.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
        })
    }
})

达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

• 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
• 小礼物走一走 or 点赞