重写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%;

/* border-bottom: 1rpx solid #f1f1f1; */

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动态回显到屏幕