小程序中实现下拉框功能

      不得不吐槽一下,小程序中是没有下拉框这个组件的, 真的好恶心.所以一般使用选择器picker代替下拉框,或者自己手写下拉框.下面就是下拉框的实现代码,可以直接拿去使用

     1.wxml中

                      
                       
                        
                        {
    {grade_name}}
                        
                        
                        
                          {
    {item.exhibition_name}}
                        
                        
                         

     2.wxss中

.top{
 width: 100vw;
 height: 80rpx;
 padding: 0 20rpx;
 line-height: 80rpx;
 font-size: 34rpx;
 /* border-bottom: 1px solid #000; */
}
.top-text{
 float: left
}
/* 下拉框 */
.top-selected{
  width: 30%;
  display: flex;
  /* float: right; */
  position: absolute;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  padding: 0 10rpx;
  font-size: 30rpx;
  height: 50rpx;
   overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 下拉内容 */
.select_box {
  background-color: #fff;
  padding: 0 20rpx;
  width: 27%;
  right: 0;
  z-index: 2;
  position: relative;
  top: 55rpx;
 
  /* border: 1px solid pink; */
  overflow: hidden;
  text-align: left;
  animation: myfirst 0.5s;
  font-size: 30rpx;
}
.select_one {
  padding-left: 20rpx;
  width: 100%;
  height: 60rpx;
  position: relative;
  line-height: 60rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid #ccc;
}
/* 下拉过度效果 */
@keyframes myfirst {
  from {
    height: 0rpx;
  }
  
  to {
    height: 210rpx;
  }
}

   3.js中

Page({
    data{
        grade_name: '--请选择--',
        oid:1,
        selected: false
    },

    /**
   * 已选下拉框
   */
  mySelect(e) {
    var name = e.currentTarget.dataset.name
    var id = e.currentTarget.dataset.oid
    this.setData({
      grade_name: name,
      selected: false,
      oid: id
    })
})

样式可以拿了代码之后自己再调哦

就是这样啦,么么么