本文實例為大家分享了微信小程序自定義支持圖片的彈窗，供大家參考，具體內容如下
為index.wxml添加如下圖代碼： (微信小程序 - canvas層級最高問題，如何超越canvas的層級,只能使用cover-view標簽)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!--index.wxml--><button class="show-btn" bindtap="showDialogBtn">彈窗</button><!--彈窗--><cover-view class="modal-mask" bindtap="hideModal" wx:if="{{modal.isShow}}"></cover-view><cover-view class="modal-dialog" wx:if="{{modal.isShow}}" > <cover-view class="modal-title">{{modal.title}}</cover-view> <cover-view class="modal-content"> <cover-image src="{{modal.src}}" class="img-full" style="height:auto;" mode="widthFix"></cover-image> </cover-view> <cover-view class="modal-footer" wx-if="{{modal.isFooter}}"> <cover-view class="btn-cancel" bindtap="onCancel" data-status="cancel">{{modal.cancel}}</cover-view> <cover-viewew class="btn-confirm" bindtap="onConfirm" data-status="confirm">{{modal.ok}}</cover-viewew> </cover-view></cover-view> |
修改樣式文件index.wxss，樣式代碼如下圖所示：
/index.wxss/
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
.show-btn { margin-top: 100rpx; color: #22cc22;}.modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff;}.modal-dialog { width: 540rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 9999; background: #f9f9f9; margin: -180rpx 105rpx; border-radius: 36rpx;}.modal-title { padding-top: 50rpx; font-size: 36rpx; color: #030303; text-align: center;}.modal-content { padding: 50rpx 32rpx;}.modal-input { display: flex; background: #fff; border: 2rpx solid #ddd; border-radius: 4rpx; font-size: 28rpx;}.input { width: 100%; height: 82rpx; font-size: 28rpx; line-height: 28rpx; padding: 0 20rpx; box-sizing: border-box; color: #333;}input-holder { color: #666; font-size: 28rpx;}.modal-footer { display: flex; flex-direction: row; height: 86rpx; border-top: 1px solid #dedede; font-size: 34rpx; line-height: 86rpx;}.btn-cancel { width: 50%; color: #666; text-align: center; border-right: 1px solid #dedede;}.btn-confirm { width: 50%; color: #ec5300; text-align: center;} |
index.js代碼如下圖所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
//index.js//獲取應用實例var app = getApp()Page({ data: { showModal: false, }, onLoad: function () { }, /** * 彈窗 */ showDialogBtn: function () { this.setData({ showModal: true }) }, /** * 彈出框蒙層截斷touchmove事件 */ preventTouchMove: function () { }, /** * 隱藏模態對話框 */ hideModal: function () { this.setData({ showModal: false }); }, /** * 對話框取消按鈕點擊事件 */ onCancel: function () { this.hideModal(); }, /** * 對話框確認按鈕點擊事件 */ onConfirm: function () { this.hideModal(); }}) |
運行，可以看到修改樣式后的效果
這里有個要特別注意的地方，就是下面這個方法：
|
1
|
preventTouchMove: function () { } |
為什么是空方法？因為要結合界面wxml看，蒙層view里有一個事件綁定
|
1
|
catchtouchmove="preventTouchMove"。 |
這養寫的原因是阻斷事件向下傳遞，避免在彈窗后還可以點擊或者滑動蒙層下的界面。
如果不這樣寫的話，如果主界面是一個可以滾動的界面，想想看，當彈窗彈出的時候用戶還可以操作滾動列表。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_43953710/article/details/103923184
