微信小程序实现下拉框（附代码）

微信小程序里没有和HTML里的下拉框一样的组件，想要相同的效果只能自己写一个，先看效果

 

下面来看一下代码：

首先wxml

<view>
    <view>
        <text>{{selectData[index]}}</text>
        <image></image>         
    </view>
    <view>5?300:selectData.length*60):0}}rpx;'&gt;
        <text>{{item}}</text>
    </view></view><!--
  show&&"select_img_rotate"-----给显示框右边的下拉箭头添加动画

  height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;-----给改变下拉框高度，实现下拉框的显示隐藏，每个下拉选项的高度为60，下拉框的最大高度这里设置的是300，所以这里写成当数据长度大于5时，下拉框高度为300，反之下拉框高度为数据长度乘以60

  index==selectData.length-1&&"border:0;"-----取消下拉选项的最后一个的下边框
  -->