小程序下拉列表

**

小程序下拉列表

**

// pages/schoolclassification/schoolclassification.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  // 点击下拉显示框
  selectTap() {
    this.setData({
      show: !this.data.show
    });
  },
  selectTap1() {
    this.setData({
      show1: !this.data.show1
    });
  },
  

 
})

<!--pages/schoolclassification/schoolclassification.wxml-->
<view class='page_row' bindtap="suo">
  <view class="search">
    <view class="df search_arr">
      <icon class="searchcion" size='20' type='search'></icon>
      <input class="name" placeholder="请输入关键字" style='font-size:30rpx;' />
    </view>
  </view>
</view>
<view class='boxs'>
  <view class='company'>
    <text catchtap='selectTap'>| 举办单位</text>
    <text class='select_img {{show&&"select_img_rotate"}}'> ></text>
  </view>

  <view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*80):0}}rpx;'>
    <view class='boxbna'>公办</view>
    <view class='boxbna'>民办</view>
  </view>
</view>
<view class='boxs1' style='margin-top:{{show? 0: -130}}rpx;'>
  <view class='company'>
    <text catchtap='selectTap1'>| 教育分类</text>
    <text class='select_img1 {{show1&&"select_img_rotate1"}}'> ></text>
  </view>
  
  <view class='option_box1' style='margin-top:0rpx;height:{{show1?(selectData.length>5?300:selectData.length*80):0}}rpx;'>
  <view class='box'>幼儿园</view>
  <view class='box'>小学</view>
  <view class='box'>初中中学</view>
  <view class='box'>高级中学</view>
  <view class='box'>完全中学</view>
  <view class='box'>附设小学班</view>
  <view class='box'>职业高中学校</view>
  <view class='box'>中等技术学校</view>
  <view class='box'>其他中职机构</view>
  <view class='boxtxt'>九年一贯制学校</view>
  <view class='boxtxt'>十二年一贯制学校</view>
  <view class='boxtxt'>附设普通高中班</view>
  <view class='box'>其他特教学校</view>
  <view class='box'>服务提供商</view>
  </view>
  
</view>
<view id='bottoms'>
  <view class='horizontalline'></view>
  <view class='box'>重置</view>
  <view class='box' id='sure'>确定</view>
</view>

/* pages/schoolclassification/schoolclassification.wxss */
.search{
width: 80%;
margin: 10rpx;
}
.search_arr {
border: 1px solid #d0d0d0;
border-radius: 10rpx;
margin-left: 150rpx;
}
.search_arr input{
margin-left: 60rpx;
height: 60rpx;
border-radius: 5px;
}
.sousuo {
margin-left: 15rpx;
width: 15%;
line-height: 150%;
text-align: center;
border: 1px solid #d0d0d0;
border-radius: 10rpx;
}
.page_row{
display: flex;
flex-direction: row;
height: 80rpx;
}
.searchcion {
margin: 18rpx 10rpx 10rpx 10rpx;
position: absolute;
left:165rpx;
z-index: 4;
width: 20px;
height: 20px;
text-align: center;
}
.company{
  margin-left: 30rpx;
  font-size: 33rpx;

}
.boxbna{
  border:  1px solid #000;
  width: 200rpx;
  height: 80rpx;
  margin-left: 30rpx;
  border-radius: 20rpx;
  float: left;
  text-align: center;
  font-size: 30rpx;
  line-height: 80rpx;
}
.box{
  border:  1px solid #000;
  width: 200rpx;
  height: 80rpx;
  margin-top: 30rpx;
  margin-left: 30rpx;
  border-radius: 20rpx;
  float: left;
  text-align: center;
  font-size: 30rpx;
  line-height: 80rpx;
}
.boxtxt{
  border:  1px solid #000;
  width: 200rpx;
  height: 80rpx;
  margin-top: 30rpx;
  margin-left: 30rpx;
  border-radius: 20rpx;
  float: left;
  text-align: center;
  font-size: 30rpx;
}
.boxs{
  width: 100%;
  height: 200rpx;

}
.boxs1{
  width: 100%;
  height: 640rpx;
}
.horizontalline{
  border:  1px #ccc solid;
  height: 0rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
}
#sure{
  background-color: rgb(77, 117, 228);
  color: wheat;
}
/* pages/homepage2/editposition/editposition.wxss */


.ipt{
 border-bottom: 1px #ccc solid;
  float: right;
}


.select_box{
  background: #fff;
  width: 80%;
  margin: 30rpx auto;
  position: relative;
}
.select{
  box-sizing: border-box;
  width: 79%;
  height: 60rpx;
  border:1px solid #efefef;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  margin-left: 150rpx;
  margin-top: -50rpx;
}
.select_text{
  font-size: 30rpx;
  flex: 1;
}
.select_img{
  
  text-align: center;
  width: 40rpx;
  height: 40rpx;
  display: block;
  transition:transform 0.3s;
  margin-top: -40rpx;
  margin-left: 160rpx;
}
.select_img_rotate{
  transform:rotate(90deg); 
}
.option_box{
  position: absolute;
  top: 150rpx;
  width: 73%;
  box-sizing: border-box;
  height:100rpx;
  overflow-y: auto;
  border-top: 0;
  background: #fff;
  transition: height 0.3s;
   margin-left: 0rpx;
}
.option{
  display: block;
  line-height: 40rpx;
  font-size: 30rpx;
  border-bottom: 1px solid #efefef;
  padding: 20rpx;
  
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
.select_box1{
  background: #fff;
  width: 80%;
  margin: 30rpx auto;
  position: relative;
}
.select1{
  box-sizing: border-box;
  width: 79%;
  height: 60rpx;
  border:1px solid #efefef;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  margin-left: 150rpx;
  margin-top: -50rpx;
}
.select_text1{
  font-size: 30rpx;
  flex: 1;
}
.select_img1{
  
  text-align: center;
  width: 40rpx;
  height: 40rpx;
  display: block;
  transition:transform 0.3s;
  margin-top: -40rpx;
  margin-left: 160rpx;
}
.select_img_rotate1{
  transform:rotate(90deg); 
}
.option_box1{
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  height:600rpx;
  overflow-y: auto;
  border-top: 0;
  background: #fff;
  transition: height 0.3s;
  margin-left: 0rpx;
}
.option1{
  display: block;
  line-height: 40rpx;
  font-size: 30rpx;
  border-bottom: 1px solid #efefef;
  padding: 20rpx;
  
}
#bottoms{
  
  position: absolute;
  top: 920rpx;
 width: 100%;
}