小程式彈出框詳解

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 點贊