重寫picker 遮罩層 動态效果遮罩層

<!-- 遮罩層 --> < view class= "dialog {{ showDialog ? 'dialog_show' : '' }}"> < view class= "dialog_mask" bindtap= "onClickdiaView" / > < view class= "dialog_container"> < view class= 'title-courses'> < text >請選擇課程 </ text > </ view > < view wx:for= "{{coursesList}}"> < view bindtap= 'chooseCourse' data-Index= '{{index}}' data-CourseName= '{{item.courseName}}' data-TeacherName= '{{item.teacherName}}'> < view class= 'radioLine-top'>{{item.teacherName}} </ view > < view class= 'radioLine'>{{item.courseName}} </ view > </ view > </ view > </ view > </ view >

.dialog_mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba( 0, 0, 0, 0.5 ); display: none; }

.dialog_container { position: fixed; bottom: 0; width: 750 rpx; height: 75%; background: white; transform: translateY( 150% ); transition: all 1s ease; z-index: 11; overflow-y: scroll; overflow-x: hidden; }

.dialog_show .dialog_container { transform: translateY( 0 ); }

.dialog_show .dialog_mask { display: block; }

.dialog__mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba( 0, 0, 0, 0.5 ); display: none; }

.dialog__container { position: fixed; bottom: 0; width: 750 rpx; transform: translateY( 150% ); transition: all 0.4s ease; z-index: 11; height: 100%; }

.dialog--show .dialog__container { transform: translateY( 0 ); }

.dialog--show .dialog__mask { display: block; }

.title-courses { height: 70 rpx; line-height: 70 rpx; width: 100%; }

.title-courses text { font-size: 26 rpx; margin-left: 50 rpx; margin-top: 10 rpx; }

.radioLine-top { display: block; width: 100%; margin-left: 5%; font-size: 26 rpx; }

.radioLine { display: block; width: 100%; border-bottom: 1 rpx solid #f1f1f1; margin-left: 5%; font-size: 26 rpx; }

data: { showDialog: false, //動态遮罩層 }, //隐藏動态遮罩層 onClickdiaView: function (e) { var that = this that.setData({ showDialog: false }) },

//請求完資料加載 顯示遮罩層 that.setData({ showDialog: true })

原理就是 先将遮罩層放到螢幕外 在通過css動态回顯到螢幕