重写picker 遮罩层动态效果遮罩层

最新推荐文章于 2024-08-31 15:22:23 发布

aaron9185

最新推荐文章于 2024-08-31 15:22:23 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签：小程序重写picker 动态显示遮罩层 picker选择器微信

本文链接：https://blog.youkuaiyun.com/aaron9185/article/details/78731518

本文介绍了一种使用WXML和WXSS实现的课程选择对话框，该对话框包含一个遮罩层和滚动列表，用于展示课程及教师信息，并可以通过点击进行选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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