小程序弹出框详解

待我称王封你为后i 2021-09-17 04:40 402阅读 0赞

![标题图][1240]

小程序弹出框详解

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)

![效果][1240 1]

![效果][1240 2]

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

![弹出框][1240 3]

> 弹出框

// 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弹出

![效果][1240 4]

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

![效果][1240 5]

//获取应用实例  
    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="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][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

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

[1240]: /images/20210724/b3b1f227379a4f60976c82b1e3ccb4ca.png
[1240 1]: /images/20210724/c12d5259d71c4085868b1031786e6d87.png
[1240 2]: /images/20210724/76481048e2a94b818f1858583a6cb74c.png
[1240 3]: /images/20210724/3cd96608cabd47f0963fb4847c8d96fa.png
[1240 4]: /images/20210724/3a28facbb1c64ba2815bc6e89a4ade30.png
[1240 5]: /images/20210724/92f36e0e11cb492681dfa526f4dcd0e1.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1