微信小程序下拉列表

1、效果图

2、构建组件

page.wxml

<view class='select_box'>
    <view class='select' catchtap='selectTap'>
        <text class='select_text'>{{selectData[index]}}</text>
        <image class='select_img {{selectShow&&"select_img_rotate"}}' src='/images/triangle.png'  background-size="contain"></image> 
    </view>
    <view class='option_box' style='height:{{selectShow?(selectData.length>5?325:selectData.length*50):0}}rpx;'>
        <text class='option' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</text>
    </view>
</view>

page.wxss

.overflow {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 300rpx;
  border: 2rpx solid blueviolet;
  border-radius: 20rpx;
  background-color: lightgray;
}

.single {
  margin-top: 100rpx;
  border: 2rpx solid blueviolet;
  border-radius: 20rpx;
  background-color: lightgray;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.shadow {
  margin-top: 50rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  text-shadow: 10rpx 10rpx 10rpx plum;
}


.select_box{
  width:45%;
  height:70%;
  border-radius: 14rpx;
  position: relative;
}
.select_box .select{
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 10rpx;
}
.select_box .select .select_text{
  font-size: 26rpx;
  color: #777777;
  line-height: 28rpx;
  flex: 1;
}
.select_box .select .select_img{
  width: 30rpx;
  height: 30rpx;
  display: block;
  transition:transform 0.3s;
}
.select_box .select .select_img_rotate{
  transform:rotate(180deg); 
}
.select_box .option_box{
  position: absolute;
  top: calc(100% - 1px);
  width: 100%;
  box-sizing: border-box;
  height: 0;
  overflow-y: auto;
  background: #fff;
  transition: height 0.3s;
  border-left:1px solid #efefef;
  border-right:1px solid #efefef;
}
.select_box .option_box .option{
  display: block;
  line-height: 30rpx; 
  font-size: 26rpx;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  padding: 10rpx;
}

page.js

Page({

  data: {
    selectShow: false,//控制下拉列表的显示隐藏，false隐藏、true显示
    selectData: ['高等数学','线性代数','程序设计','大数据','大学物理'],//下拉列表的数据
    index: 0,//选择的下拉列表下标
  },
  // 点击下拉显示框
  selectTap() {
    this.setData({
      selectShow: !this.data.selectShow
    });
  },
  // 点击下拉列表
  optionTap(e) {
    let Index = e.currentTarget.dataset.index;//获取点击的下拉列表的下标
    this.setData({
      index: Index,
      selectShow: !this.data.selectShow
    });
  },
})