小程式彈出框詳解

摘要： 標題圖 小程式彈出框詳解 qjlx: function() { var itemList = ['病假', '事假']; wx.showActionSheet({ itemList: i...

小程式彈出框詳解

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

結語

• 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
• 小禮物走一走 or 點贊