网上的下拉框组件都不是自己想要的于是就自己写了一个。
wxml
原代码上传竟然显示不出来，wxml只能截图了，然后是js部分
data: {
dropdownData:[“综合排序”,”行政区”,”商业圈”],//下拉框的数组
selectData: [‘默认排序’, ‘距离我最近’, ‘距离我最远’],//下拉选项的数组
sort_hidden: true,//下拉框的显示或隐藏
zhezhao:true,//遮罩层
dropup_pic_index: true,//选择下拉框
},
// 下拉框确定点击事件
dropdownTap(e){
let _this=this;
_this.setData({
id: e.currentTarget.dataset.index,//存入下拉框的id
sort_hidden:false,//下拉框的显示或隐藏
zhezhao: false,//遮罩层
upordown: “up”,
})
},
// 点击下拉列表
optionTap(e) {
let _that=this;
_that.setData({
key: e.currentTarget.dataset.index,//存入下拉框的key
zhezhao: true,//遮罩层的显示或隐藏
sort_hidden: true,//下拉框的显示或隐藏
upordown: “down”,
});
css部分
/* 下拉框 */
.dropdown{
width: 750rpx;
height: 80rpx;
display: flex;
}
.dropdown view{
width:250rpx;
height:80rpx;
font-size:28rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(102,102,102,1);
line-height:80rpx;
text-align: center;
}
.dropdown view image{
width:18rpx;
height:15rpx;
margin-left: 10rpx;
margin-top: 30rpx;
}
/* 下拉框一 */
.sort{
padding-left: 60rpx;
overflow: hidden;
width: 640rpx;
padding-right: 50rpx;
position: absolute;
left: 0;
top: 160rpx;
z-index: 999;
background-color: white;
}
.up{
animation-name:slidown; /名称/
animation-duration:0.3s; /持续时间/
animation-timing-function:linear; /播放动画时从头到尾都以相同的速度/
}
.down{
animation-name:slidup; /名称/
animation-duration:0.3s; /持续时间/
animation-timing-function:linear; /播放动画时从头到尾都以相同的速度/
}
.sort view{
height: 80rpx;
line-height: 80rpx;
font-size:28rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
}
.dropdown_active{
color:rgba(20,130,240,1);
}
.sort image{
width:30rpx;
height:21rpx;
float: right;
margin-top: 30rpx;
}
/* css3下拉特效 */
@keyframes slidown{
from{
transform: translateY(-100%);
}
to{
transform: translateY(0%);
}
}
@keyframes slidup{
from{
transform: translateY(0%);
}
to{
transform: translateY(-100%);
}
}
.show{
display: block;
}
.hide{
display: none
}
/* 蒙层消失 */
.zhezhao{
position: fixed;
top: 160rpx;
left: 0;
z-index: 99;
width: 100%;
height: 100%;
background-color:#000;
opacity:0.5;
}
效果图
第一次做小程序，以后再改进。
