E企盈营销工具技术服务商 热线:4006-838-530

微信小程序的简单下拉框组件

E企盈直播平台营销卖货系统

网上的下拉框组件都不是自己想要的于是就自己写了一个。 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;  } 效果图   第一次做小程序,以后再改进。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序的简单下拉框组件
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏