<!-- 遮罩层 -->
<
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动态回显到屏幕