首页 > 新闻动态 > 小白教学-微信小程序开发如何用代码实现下拉框功能?

小白教学-微信小程序开发如何用代码实现下拉框功能?

发布时间:2021-12-16

浏览次数:114

本文链接:

在开发微信小程序时,经常会用到小程序的下拉框功能,但微信小程序里没有和HTML里的下拉框组件,那么自己手写就非常麻烦,下面昭旭科技就为大家发一个编写微信小程序下拉框的例子。


  从WXML代码开始看:

  <view>

 <view catchtap='selectTap'>

  <text>{{selectData[index]}}</text>

  <image class='select_img {{show&&"select_img_rotate"}}' src='/image/gobottom.png'></image>   

 </view>

 <view style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>

  <text style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{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;"-----取消下拉选项的最后一个的下边框


小白小程序开发教学


 下面看WXSS代码:


page{

 background: #f3f7f7;


}

.select_box{

 background: #fff;

 width: 80%;

 margin: 30rpx auto;

 position: relative;


}

.select{

 box-sizing: border-box;

 width: 100%;

 height: 70rpx;

 border:1px solid #efefef;

 border-radius: 8rpx;

 display: flex;

 align-items: center;

 padding: 0 20rpx;


}

.select_text{

 font-size: 30rpx;

 flex: 1;


}

.select_img{

 width: 40rpx;

 height: 40rpx;

 display: block;

 transition:transform 0.3s;


}

.select_img_rotate{

 transform:rotate(180deg);


}

.option_box{

 position: absolute;

 top: 70rpx;

 width: 100%;

 border:1px solid #efefef;

 box-sizing: border-box;

 height: 0;

 overflow-y: auto;

 border-top: 0;

 background: #fff;

 transition: height 0.3s;


}

.option{

 display: block;

 line-height: 40rpx;

 font-size: 30rpx;

 border-bottom: 1px solid #efefef;

 padding: 10rpx;

}


最后就是JS代码:

以上就是关于小程序下拉框开发的案例以及代码,有需要的小伙伴可以学习一下。