【微信小程序开发笔记】下拉框选项select option写法
写小程序时候，经常遇到使用下拉框选项，不过每次都手写很麻烦，所有我就发一个例子吧，因为我包在其他模块中，所有样式不知道有没有复制全，大家见谅！
小程序也有一个选项组件：picker 这个非常好用， 现在基本都用这个了。挺不错。后来我才发现的。
每一个值的高度等你们可以随意设置，看个人喜好。
变量解释：
这个原理很简单，首先准备一些标签，准备一张图片（展开与折叠用），数据绑定就不说了。
设置变量：selectShow， 控制下拉框列表是否显示隐藏，我设置的是高度，显示就设置高度，不显示就设置为0； index，设置显示第几个数据，默认可以设置为0，根据需求； selectData，你要选择的数据组[]；
js事件：
当点击三角时候，设置下拉框option选项显示（高度）。当点击选项值的时候，设置全局变量的下标值，标签中会根据下标在数组中选中，绑定数据显示， 然后设置下拉框option选项不显示（高度0）。
Page({
data: {
selectShow: false,//控制下拉列表的显示隐藏，false隐藏、true显示
selectData: ['15:10','15:15','15:20'],//下拉列表的数据
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
});
}
})
页面布局解释：
option总高度设置，根据你有多少选项以及selectShow值是否显示，我设置的是小于5个时候默认高度325rpx,超过五个时候，选项组length每一个50rpx，
height:{{selectShow?(selectData.length>5?325:selectData.length50):0}}rpx;
这个是写的一个样式，我的图片是倒三角，当展开时候，添加一个样式，rotate180度。
class=’select_img {{selectShow&&”select_img_rotate”}}’ src=’../../images/b2.png’
这个是我的选项内容是一组数组，所有我循环出来，顺便绑定一个数据到标签中data-index，也就是这个值在数组中的下标，点击时候获取方便用。然后添加一个事件catchtap=’optionTap’。
wx:for='{{selectData}}’ wx:key=’this’ data-index='{{index}}’ catchtap=’optionTap’
<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/b2.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>
wxss样式：
不解释，，看设计需求写样式。不过大多通用。
.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;
}
看一送一：
写程序时候，很多地方会用到时间选项，送大家一个函数。获取一天时间分割数组。[“00:00″,”00:05”,”00:10″….] 参数minute ，设置隔几分钟分割。时间格式你们可以自己改。
arrayTime: function (minute) {
var array_t = [];
var n = 60 / minute;
for (var i = 0; i < 24; i++) {
for (var j = 0; j < n; j++) {
var _i=i<10?'0'+i:i;
var _j=(minute * j)<10?'0'+(minute * j):(minute * j);
array_t.push(_i + ':' + _j);
}
}
return array_t;
}