<!-- 遮罩层 -->
<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: 750rpx;
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: 750rpx;
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: 70rpx;
line-height:
70rpx;
width: 100%;
}
.title-courses
text {
font-size: 26rpx;
margin-left:
50rpx;
margin-top: 10rpx;
}
.radioLine-top {
display: block;
width: 100%;
/* border-bottom: 1rpx solid #f1f1f1; */
margin-left:
5%;
font-size: 26rpx;
}
.radioLine {
display: block;
width: 100%;
border-bottom:
1rpx solid
#f1f1f1;
margin-left:
5%;
font-size: 26rpx;
}
data: {
showDialog: false,
//动态遮罩层
},
//隐藏动态遮罩层
onClickdiaView: function (e) {
var that = this
that.setData({
showDialog: false
})
},
//请求完数据加载 显示遮罩层
that.setData({
showDialog: true
})
原理就是 先将遮罩层放到屏幕外 在通过css动态回显到屏幕