效果圖
界面代碼 .wxml
<button class="show-btn" bindtap="showDialogBtn">彈窗</button><view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view><view class="modal-dialog" wx:if="{{showModal}}"> <view class="modal-title">添加數(shù)量</view> <view class="modal-content"> <view class="modal-input"> <input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="請輸入數(shù)量"></input> </view> </view> <view class="modal-footer"> <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view> <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">確定</view> </view></view>
樣式 .wxss
.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;}
- 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
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
事件及方法 .js
Page({ data: { showModal: false, }, onLoad: function () { }, /** * 彈窗 */ showDialogBtn: function() { this.setData({ showModal: true }) }, /** * 彈出框蒙層截斷touchmove事件 */ preventTouchMove: function () { }, /** * 隱藏模態(tài)對話框 */ hideModal: function () { this.setData({ showModal: false }); }, /** * 對話框取消按鈕點擊事件 */ onCancel: function () { this.hideModal(); }, /** * 對話框確認按鈕點擊事件 */ onConfirm: function () { this.hideModal(); }})
- 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
實現(xiàn)思路解讀及原理
界面解讀：
用一個蒙層+彈窗來組成，用綁定的數(shù)據(jù){{showModal}}來控制彈窗的顯示和隱藏
事件及方法解讀：
讓彈窗顯示的方法：
showDialogBtn: function() { this.setData({ showModal: true }) }
讓彈窗消失的方法：
hideModal: function () { this.setData({ showModal: false }); }
這里有個要特別注意的地方，就是下面這個方法：
preventTouchMove: function () { }
為什么是空方法？因為要結(jié)合界面wxml看，蒙層view里有一個事件綁定catchtouchmove="preventTouchMove"。這養(yǎng)寫的原因是阻斷事件向下傳遞，避免在彈窗后還可以點擊或者滑動蒙層下的界面。如果不這樣寫的話，如果主界面是一個可以滾動的界面，想想看，當(dāng)彈窗彈出的時候用戶還可以操作滾動列表，我想你的產(chǎn)品經(jīng)理會來找你的。
3. 樣式解讀：(這個標(biāo)題沒加代碼塊標(biāo)識，但還是像代碼塊一樣被顯示了，這是個bug?。?！- -)
.modal-mask和.modal-dialog樣式的寫法需要特別注意。
主要是層級關(guān)系，彈窗要保證在最上層，不被界面遮擋，然后蒙層要遮擋住界面，但是不可遮擋彈窗。所以.modal-mask和.modal-dialog的z-index值要注意。
