微信小程式—自定義模態對話方塊例項
微信小程式—自定義模態對話方塊例項
由於官方API提供的顯示模態彈窗,只能簡單地顯示文字內容,不能對對話方塊內容進行自定義,欠缺靈活性,所以自己從模態彈窗的原理角度來實現了自定義的模態對話方塊。
- wx.showModal(OBJECT)
- 自定義
- 模態對話方塊
涉及檔案
-
介面
wxml
-
樣式
wxcss
-
事件及方法
js
效果圖
介面程式碼 .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">新增數量</view>
<view class="modal-content">
<view class="modal-input">
<input placeholder-class ="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="請輸入數量"></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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
樣式 .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
- 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 () {
},
/**
* 隱藏模態對話方塊
*/
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
- 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
實現思路解讀及原理
-
介面解讀:
用一個蒙層+彈窗來組成,用繫結的資料{{showModal}}來控制彈窗的顯示和隱藏 -
事件及方法解讀:
讓彈窗顯示的方法:
showDialogBtn: function() {
this.setData({
showModal: true
})
}
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
讓彈窗消失的方法:
hideModal: function () {
this.setData({
showModal: false
});
}
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
這裡有個要特別注意的地方,就是下面這個方法:
preventTouchMove: function () {
}
- 1
- 2
- 1
- 2
為什麼是空方法?因為要結合介面wxml看,蒙層view裡有一個事件繫結catchtouchmove="preventTouchMove"
。這養寫的原因是阻斷事件向下傳遞,避免在彈窗後還可以點選或者滑動蒙層下的介面。如果不這樣寫的話,如果主介面是一個可以滾動的介面,想想看,當彈窗彈出的時候使用者還可以操作滾動列表,我想你的產品經理會來找你的。
3. 樣式解讀:(這個標題沒加程式碼塊標識,但還是像程式碼塊一樣被顯示了,這是個bug!!!- -)
.modal-mask和.modal-dialog樣式的寫法需要特別注意。
主要是層級關係,彈窗要保證在最上層,不被介面遮擋,然後蒙層要遮擋住介面,但是不可遮擋彈窗。所以.modal-mask和.modal-dialog的z-index值要注意。
相關推薦
微信小程式—自定義模態對話方塊例項
微信小程式—自定義模態對話方塊例項 由於官方API提供的顯示模態彈窗,只能簡單地顯示文字內容,不能對對話方塊內容進行自定義,欠缺靈活性,所以自己從模態彈窗的原理角度來實現了自定義的模態對話方塊。 wx.showModal(OBJECT) 自定義 模態對話方塊 涉及檔案 介面 wxml 樣式 wxcs
微信小程式自定義模態框滾動禁止且可以在video元件上方
<video id="myVideo" class='demo' page-gesture="true" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f02016904025348
微信小程序-自定義模態對話框
val 分享圖片 per emp 技術 program earch hid 數據 更新時間 2018-9-30 2018-9-30 1.在電腦上調試input超出輸入框範圍會出現文字模糊以及位移現象(手機端不影響) index
微信小程式——自定義個性化模態框(附程式碼)
微信小程式官方提供的模態框主要有以下幾種,這幾種方法都只能簡單的顯示文字內容,不能達到設計要求。最後只能通過自定義實現可以靈活設計的彈框。 主要原理: 和普通的css相同,利用 z-index實現不同層的顯示,以實現彈框效果。 先附上最終效果圖:
微信小程式自定義分享彈窗
效果圖: 多種觸發條件使用同一個彈窗: *.js觸發處: this.setData({ isWrong:true, wrongtap:1, dialogWord:"wrong", wrongDec:"答案錯誤,是否向好友求助?" })
微信小程式自定義導航欄 navigation bar 返回鍵 首頁
微信小程式自定義導航欄(wx_custom_navigation_bar) 自定義返回鍵、首頁鍵,動態設定標題,響應式元件 版本號:1.0.0 作者:chen-yt github: https://github.com/chen-yt/wx_custom_navigation
微信小程式 自定義 swiper 樣式
本文出自: http://blog.csdn.net/wyk304443164 實現功能如下: 僅重寫了swiper的樣式,so fucking easy! wx-swiper-item { width: 90% !important; mar
解決微信小程式自定義彈窗,滑動自定義彈窗底部的頁面也一起跟著滑動的問題
解決方案,我總結了以下幾種 1、控制底部根目錄scroll-view 的scroll-y屬性的true/false,控制底部滾動以及不滾動 2、在自定義彈框最外層元素加上catchtouchmove=’true’ ;或者catchtouchmove="preventTouchMove"
微信小程式 自定義元件之《轉盤》
微信小程式支援簡潔的元件化程式設計 開發者可以將頁面內的功能模組抽象成自定義元件,以便在不同的頁面中重複使用;也可以將複雜的頁面拆分成多個低耦合的模組,有助於程式碼維護。自定義元件在使用時與基礎元件非常相似。 這篇博文主要就是分享個自己實際專案中用到的 轉盤自定義元件 專案
微信小程式自定義欄位實現選項的動態新增和刪除
問題描述: 在自定義選項中,點選新增選項按鈕,會出現一個選項的輸入框,輸入的選項可以通過點選左側的減號刪除 效果如圖: 解決過程: 1.首先寫出大體的框架。在pages下,建立了一個selfdefine的資料夾,在wxml中寫出靜態結構 selfdefine.wxml 說明
微信小程式自定義全屏遮罩
效果如下: 1、wxml <view class='' bindtap='showMask'>顯示遮罩</view> <view class="mask" hidden="{{flag}}"> <view class="maskConten
微信小程式 自定義三列城市彈窗
1.WXML <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}"
微信小程式----自定義元件
微信小程式充分借鑑了vue的程式碼風格,但是卻沒有像vue那樣的高效的元件特性。但是這一備受詬病的地方在小程式1.6.3版本得到了解決。 從小程式基礎庫版本 1.6.3 開始,小程式支援簡潔的元件化程式設計。所有自定義元件相關特性都需要基礎庫版本 1.6.3 或更高。 接下來,
微信小程式自定義屬性設定和獲取(data-)
自定義屬性語法以data-開頭: <block wx:for='{{post_key}}' wx:key="key" wx:for-item='item'> <view catchtap='onPostTap' data-postid="{{item.postId}}
微信小程式——自定義元件時,編譯報`Component is not found in path '...'`
問題描述: 在微信小程式中自定義元件時,編譯報Component is not found in path '...' VM4941:1 jsEnginScriptError Component is not found in path "components/watermark
微信小程式-自定義彈出層
效果圖 WXML <view class='popup' wx:if="{{popShow}}"> <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'&g
微信小程式--自定義元件之搜尋框
元件:搜尋框 功能:根據輸入框輸入值進行模糊查詢並在下方滑動框中顯示 功能圖: component.wxml <!--自定義元件--> <!---搜尋框 start--> <view class='main'&
微信小程式 自定義單選複選按鈕組的實現(用於實現購物車產品列表功能)
(一)單選按鈕組 模型圖如下: index.js Page({ data: { parameter: [{ id: 1, name: '銀色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模擬商
微信小程式自定義元件(一)
好吧,突然發現學不完了,一下子,那就分開吧,由於時間太久,直接重新大致複習了一下 微信小程式自定義元件微信小程式支援自定義元件下方的目錄其中,components為元件目錄,nodemodules為模組目錄,pages為小程式的頁面目錄,utils為一些基礎功能的封
微信小程式自定義元件(二)
微信小程式自定義元件 ps 由於作業部落貌似出了點問題,耽誤了點時間,找了一個stackedit.io準備寫。無奈,這是要自己建編輯器的節奏啊。沒有一個能靠的注 為何存在元件 元件間的關係 使用relations實現元件的關係,即父子關係。 定義和使用元件間的關係