不得不吐槽一下,小程序中是没有下拉框这个组件的, 真的好恶心.所以一般使用选择器picker代替下拉框,或者自己手写下拉框.下面就是下拉框的实现代码,可以直接拿去使用
1.wxml中
<view class='top'>
<view class='top-selected' bindtap='bindShowMsg'>
<text>{{grade_name}}</text>
</view>
<view class="select_box" wx:if="{{selected}}">
<view wx:for="{{exhibitorbasedata.exhibition_list}}" wx:key="{{item.exhibition_id}}">
<view class="select_one" bindtap="mySelect" data-name="{{item.exhibition_name}}" data-oid="{{item.exhibition_id}}">{{item.exhibition_name}}</view>
</view>
</view>
</view>
2.wxss中
.top{
width: 100vw;
height: 80rpx;
padding: 0 20rpx;
line-height: 80rpx;
font-size: 34rpx;
/* border-bottom: 1px solid #000; */
}
.top-text{
float: left
}
/* 下拉框 */
.top-selected{
width: 30%;
display: flex;
/* float: right; */
position: absolute;
align-items: center;
justify-content: space-between;
border: 1px solid #ccc;
padding: 0 10rpx;
font-size: 30rpx;
height: 50rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 下拉内容 */
.select_box {
background-color: #fff;
padding: 0 20rpx;
width: 27%;
right: 0;
z-index: 2;
position: relative;
top: 55rpx;
/* border: 1px solid pink; */
overflow: hidden;
text-align: left;
animation: myfirst 0.5s;
font-size: 30rpx;
}
.select_one {
padding-left: 20rpx;
width: 100%;
height: 60rpx;
position: relative;
line-height: 60rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px solid #ccc;
}
/* 下拉过度效果 */
@keyframes myfirst {
from {
height: 0rpx;
}
to {
height: 210rpx;
}
}
3.js中
Page({
data{
grade_name: '--请选择--',
oid:1,
selected: false
},
/**
* 已选下拉框
*/
mySelect(e) {
var name = e.currentTarget.dataset.name
var id = e.currentTarget.dataset.oid
this.setData({
grade_name: name,
selected: false,
oid: id
})
})
样式可以拿了代码之后自己再调哦
就是这样啦,么么么