多个下拉框列表实现

 

 wxml

<view wx:for="{{professionalList}}" wx:key="id">
    <view class="nav-son" bindtap="show" data-index="{{index}}">
      <view class="title {{listShow[index].show?'active':''}}">{{item.title}}</view>
      <view class="{{listShow[index].show?'xiabiaoUp':'xiabiaoDown'}} "></view>
    </view>

    <view class="temp {{listShow[index].show?'show':'hidden'}} ">
      <view wx:for="{{item.list}}">
        {{item.name}}
      </view>
    </view>

  </view>

js

 show: function (e) {

    let obj = this.data.listShow;
    let index = e.currentTarget.dataset.index;
    console.log("index",index)

    if (obj[index]) {
      obj[index].show = !this.data.listShow[index].show;
    } else {
      obj[index] = {};
      obj[index].show = true;
    }
    this.setData({
      listShow: obj
    });

console.log("listshow",obj)
  },

css

.tab-group {
  display: flex;
  padding: 32rpx;
  border-bottom: 6rpx solid #F7F7F7;
}

/* 下拉列表的样式 */
.nav-son {
  position: relative;
  /* 让下拉提示信息永远放于下拉内容的上面 */
  z-index: 999;
  padding: 48rpx 32rpx;
  border-top: 2rpx solid #d1d3d4;
  border-bottom: 2rpx solid #d1d3d4;
  background: #fff;
  display: flex;
  justify-content: space-between;
  height: 80rpx;
  align-items: center;
  font-size: 32rpx;
}

/* 下拉列表 下三角的样式 */
.xiabiaoUp {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 14rpx;
  border-color: transparent transparent #000000 transparent;
  border-style: solid;
}

.xiabiaoDown {
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 14rpx;
  border-color: #000000 transparent transparent transparent;
  border-style: solid;
  
}

.temp {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 32rpx;

}

.temp view {
  padding: 16rpx 40rpx;
  margin-top: 32rpx;
  margin-bottom: 32rpx;
  border-radius: 8rpx;
  background-color: rgba(247, 247, 247, 1);
}

.show {
  display: flex;
}

.hidden {
  display: none;
}

.active {
  color: rgba(78, 127, 255, 100);
  font-size: 32rpx;
}