小程序弹出框详解教程

小程序弹出框详解

1. qjlx: function() {
2. var itemList = ['病假', '事假'];
3. wx.showActionSheet({
4. itemList: itemList,
5. success: function(res) {
6. console.log(res);
7. console.log(itemList[res.tapIndex]);
8. },
9. fail: function(res) {
10. console.log(res.errMsg);
11. }
12. })
13. },

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

效果

效果

1. //获取应用实例
2. var app = getApp()
3. Page({
4. actioncnt:function(){
5. wx.showActionSheet({
6. itemList: ['A', 'B', 'C'],
7. success: function(res) {
8. console.log(res.tapIndex)
9. },
10. fail: function(res) {
11. console.log(res.errMsg)
12. }
13. })
14. }
15. })

弹出框

2. 登录密码
5.  
6.  
7. 修改
11.  
12.  
13.  

1. // js
2. // 获取登录密码:
3. password: function(e) {
4. this.setData({
5. password: e.detail.value,
6. })
7. console.log("获取登录密码:" + this.data.password);
8. },
9. // 修改登录密码
10. dlmm: function(e) {
11. this.setData({
12. hiddenmodalput: !this.data.hiddenmodalput
13. })
14. },
15. cancelM: function(e) {
16. this.setData({
17. hiddenmodalput: true,
18. })
19. },
20.  
21. confirmM: function(e) {
22. var that = this;
23. console.log("原密码" + that.data.psd + "新密码" + that.data.newpsd);
24. that.setData({
25. hiddenmodalput: true,
26. })
27. wx.request({
28. url: '',
29. method: 'POST',
30. header: {
31. 'Authorization': 'Bearer' + wx.getStorageSync('token'),
32. },
33. success(res) {
34. if (res.data.code == 0) {
35. wx.showToast({
36. title: '保存失败',
37. icon: 'success',
38. duration: 500
39. })
40. } else {
41. that.getShowToast();
42. }
43. }
44. })
45. },
46.  
47. ipsd: function(e) {
48. this.setData({
49. psd: e.detail.value
50. })
51. },
52. newipsd: function(e) {
53. this.setData({
54. newpsd: e.detail.value
55. })
56. },

指定modal弹出

效果

3. modal有输入框
4.  
7.  

1. //获取应用实例
2. var app = getApp()
3. Page({
4. data:{
5. hiddenmodalput:true,
6. //可以通过hidden是否掩藏弹出框的属性，来指定那个弹出框
7. },
8. //点击按钮痰喘指定的hiddenmodalput弹出框
9. modalinput:function(){
10. this.setData({
11. hiddenmodalput: !this.data.hiddenmodalput
12. })
13. },
14. //取消按钮
15. cancel: function(){
16. this.setData({
17. hiddenmodalput: true
18. });
19. },
20. //确认
21. confirm: function(){
22. this.setData({
23. hiddenmodalput: true
24. })
25. }
26.  
27. })

效果

1. //获取应用实例
2. var app = getApp()
3. Page({
4. actioncnt:function(){
5. wx.showActionSheet({
6. itemList: ['A', 'B', 'C'],
7. success: function(res) {
8. console.log(res.tapIndex)
9. },
10. fail: function(res) {
11. console.log(res.errMsg)
12. }
13. })
14. }
15. })

3. modal有输入框
4.  
7.  
8.  
9. //.js
10. //获取应用实例
11. var app = getApp()
12. Page({
13. data:{
14. hiddenmodalput:true,
15. //可以通过hidden是否掩藏弹出框的属性，来指定那个弹出框
16. },
17.  
18. //点击按钮痰喘指定的hiddenmodalput弹出框
19. modalinput:function(){
20. this.setData({
21. hiddenmodalput: !this.data.hiddenmodalput
22. })
23. },
24. //取消按钮
25. cancel: function(){
26. this.setData({
27. hiddenmodalput: true
28. });
29. },
30. //确认
31. confirm: function(){
32. this.setData({
33. hiddenmodalput: true
34. })
35. }
36. })

结语

下面我将继续对 其他知识 深入讲解 。