效果图


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.length5?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);}