小程序弹出框详解
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 点赞
网友评论