微信小程序实现下拉框功能

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

下面来看一下代码：

首先WXML

view class=' select _ box ' view class=' select ' catch tap=' selectTap ' text class=' select _ text ' { select data[index]}/text image class=' select _ img { { show ' select _ img _ rotate ' } ' src='/image/go bottom。png '/image/view view class=' option _ box ' style=' height : { { show？（选择数据。长度5?300:选择数据。长度* 60):0 } } rpx；text class=' option ' style=' { { index==select data。长度-1 '边框：0；'} } ' wx : for=' { { select data } } ' wx : key=' this ' data-index=' { { index } } ' catch tap=' option tap ' { item } }/text/view/view！-显示"选择_ img _旋转"-给显示框右边的下拉箭头添加动画height:{{show？（选择数据。长度5?300:选择数据。长度* 60):0 } } rpx；-给改变下拉框高度，实现下拉框的显示隐藏，每个下拉选项的高度为60,下拉框的最大高度这里设置的是300,所以这里写成当数据长度大于5时，下拉框高度为300,反之下拉框高度为数据长度乘以60 index==selectdata。长度-1 '边框：0；-取消下拉选项的最后一个的下边框-然后WXSS(如果不想要动画，删掉页面样式表里的transition:transform 0.3s和中天：高0.3s即可)

第{ background: # f3f7f7}。select _ box { background : # fff；宽度： 80%;margin: 30rpx auto相对位置：}.选择{箱式：边框-盒子；宽度： 100%;高度： 70rpxborder:1px固体# efefeffborder-radius : 8 rpx；display : flex align-items :居中；padding: 0 20rpx }。select _ text { font-size : 30 rpx；flex : 1；}.select _ img { width : 40 rpx h8 : 40 rpx display :块；transition:transform 0.3s }。选择_ img _ rotate { transform : rotate(180度);}.option_box{位置：绝对值；top: 70rpx宽度： 100%;border:1px固体# efefefef盒子尺寸：边框盒子；高度： 0;溢出-y:自动；边框-top : 0；背景# fff中天：高0.3s}。选项{显示：块；线高： 40 rpxfont-size : 30 rpx边框-底部： 1px实心# efefefpadding: 10rpx }这里是射流研究…

页面({ data: { show:false，//控制下拉列表的显示隐藏，假的隐藏、真实显示选择数据：['1 ',' 2 ',' 3 ',' 4 ',' 5 ',' 6'],//下拉列表的数据索引：0/选择的下拉列表下标}, //点击下拉显示框selectTap(){ this。setdata({ show :这个。数据。show })；}, //点击下拉列表选项点击(e){让索引=e . CurrentTarget。数据集。指数；//获取点击的下拉列表的下标this.setData({ index:Index，show:这个。数据。show })；}，onLoad:函数（选项){ }})完结！

有什么错误或者其他好的方法，请告知，谢谢

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。