效果图


test.js

/*** 页面的初始数据*/data: {shows: false, //控制下拉列表的显示隐藏，false隐藏、true显示selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据indexs: 0, //选择的下拉列 表下标,},// 点击下拉显示框selectTaps() {this.setData({shows: !this.data.shows,});},// 点击下拉列表optionTaps(e) {let Indexs = e.currentTarget.dataset.index; //获取点击的下拉列表的下标console.log(Indexs)this.setData({indexs: Indexs,shows: !this.data.shows});},

test.wxml

<view class='fenlei'><text>地址</text><!-- 下拉框 --><view class='select_box'><view class='select' catchtap='selectTaps'><text class='select_text'>{{selectDatas[indexs]}}</text><!-- <image class='words_img' src='../../images/sanjiao.png'></image> --><image class='select_img {{shows&&"select_img_rotate"}}' src='../../images/sanjiao.png'></image></view><view class='option_box' style='height:{{shows?(selectDatas.length>5?300:selectDatas.length*60):0}}rpx;'><text class='option' style='{{indexs==selectDatas.length-1&&"border:0;"}}' wx:for='{{selectDatas}}' wx:key='this' data-index='{{index}}' catchtap='optionTaps'>{{item}}</text></view></view>
</view>

test.wxss

/* fenlei */
.fenlei{margin: 0 25rpx;height: 90rpx;line-height: 90rpx;border-bottom: 1rpx solid #e6e6e6;display: flex;align-items: center;
}
.fenlei text{font-size: 30rpx;color: #999999;margin-left: 15rpx;
}
/* 下拉框 */
.select_box {background: #fff;width: 620rpx;/* margin: 0 auto; */height: 90rpx;line-height: 90rpx;text-align: left;position: relative;
}.select {box-sizing: border-box;width: 100%;height: 86rpx;/* border: 1px solid #efefef; */border-radius: 8rpx;display: flex;align-items: center;padding: 0 20rpx;
}.select_text {font-size: 28rpx;flex: 1;color: rgb(102, 102, 102);line-height: 86rpx;height: 86rpx;
}.select_img {width: 40rpx;height: 40rpx;display: block;transition: transform 0.3s;
}.select_img_rotate {transform: rotate(180deg);
}.option_box {position: absolute;top: 86rpx;width: 100%;/* border: 1px solid #efefef; */box-sizing: border-box;height: 0;overflow-y: auto;border-top: 0;background: #fff;transition: height 0.3s;z-index: 100;
}.option {display: block;line-height: 40rpx;font-size: 28rpx;border-bottom: 1px solid #efefef;padding: 10rpx;color: rgb(102, 102, 102);
}