微信小程序自定义多项内容的下拉选项框——2023.06.08

1、实现效果如图

2、WXML代码

<!--component/dropDownMenu/index.wxml-->
<view>
    <view class='search-area area-flex' wx:if="{{isShowInput}}">
        <view class="area-right">
            <view class="weui-search-bar-1">
                <view class="search-form">
                    <!--搜索框-->
                    <view class="weui-search-bar__box">
                        <icon class="searchIcon" type="search" size="18"></icon>
                        <input type="text" class="searchInput" placeholder="{{searchText}}"  value="{{inputVal}}"
                               focus="{{inputShowed}}" bindinput="inputTyping" bindconfirm="search" />
                        <view class="delsearchIcon" bindtap="clearInput" wx:if="{{inputVal.length > 0}}">
                            <icon type="clear" size="18"></icon>
                        </view>
                    </view>
                    <!--input搜索框结束-->
                    <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
                        <icon class="weui-icon-search" type="search" size="18"></icon>
                        <view class="weui-search-bar__text">{{searchText}}</view>
                    </label>
                </view>
                <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="search">搜索</view>
            </view>
        </view>
    </view>
    <!-- 下拉菜单 -->
    <view class="menuC" wx:if="{{isShowMenu}}">
        <view class="flex">
            <view wx:for="{{arr}}" wx:key="key" data-id='{{item.id}}' bindtap='showKindsOf' class="title-wrap" style="width:{{item_Width}}">
                <view class="showFourSize">{{item.content?item.content:item.title}}</view>
                <image wx:if="{{isShowMask && item.id==tempid}}" src="../../static/images/upPath@2x.png" class="arrow_down"></image>
                <image wx:else src="../../static/images/Path@2x.png" class="arrow_down"></image>
            </view>
        </view>
        <!-- mask -->
        <view bindtap='closeKindOf' class="mask" wx:if="{{isShowMask}}" catchtouchmove='{{true}}'></view>
        <!-- select -->
        <view class="select" style="height:{{select_height}}" catchtouchmove='{{true}}'>
            <view bindtap='confirm' wx:for="{{select_content}}" wx:for-item="item1" wx:key="key1" data-fatherId='{{item1.fatherId}}'
            class="select-item" data-name='{{item1.name}}' data-id="{{item1.id}}">{{item1.name}}</view>
        </view>
    </view>
</view>

3、JS代码

Component({
  lifetimes: {
    attached: function() {
      this.setData({
        item_Width:100/this.data.arr.length + '%'
      },()=>{
        // console.log(this.data.item_Width)
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    //input数据
    inputShowed: { // 属性名
      type: Boolean,
      value: false
    },
    searchText: {
      type: String,
      value: ''
    },
    isShowInput: { //是否显示input
      type: Boolean,
      value: true
    },
    isShowMenu: { //是否显示下拉选项
      type: Boolean,
      value: true
    },
    arr:{
      type: Array,
      value: [],
    },
  },
  
  /**
   * 组件的初始数据
   */
  data: {
    item_Width: '',
    select_height: '0rpx',
    isShowMask: false,
    select_content: [],
  
    filterItem: {}, //请求条件 数据
    inputVal: "",
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    //显示搜索框
    showInput: function (e) {
      this.setData({
        inputShowed: true
      })
    },
    //获取输入的值
    inputTyping: function (e) {
      this.setData({
        inputVal: e.detail.value
      });
    },
    //取消
    clearInput: function () {
      this.setData({
        inputShowed: false,
        inputVal: ""
      });
      this.triggerEvent('cancelSearch', {})
    },
    //搜索
    search: function(){
      var filterItem = {};
      filterItem.Filter = this.data.inputVal;
      this.triggerEvent('getSearchResult', filterItem);
    },
    //选择具体事项
    confirm(options){
      let temparr = this.data.arr;
      let id = options.currentTarget.dataset.id;
      let fatherId = options.currentTarget.dataset.fatherid;
      let name = options.currentTarget.dataset.name;
      temparr.forEach((value, key)=>{
        if (key == fatherId){
          value.arr.forEach((v, k)=>{
            if(v.id == id){
              if(name == '全部'){
                value.content = '';
                value.value = '';
                return value;
              }
              value.content = name;
              value.value = id;
              return value;
            }else {
              return value;
            }
          });
        }
      });
      this.setData({
        arr: temparr,
        select_height: '0rpx',
        isShowMask: false
      },()=>{
        //调用外部方法
        var filterItem = {};
        temparr.forEach((value, key)=>{
          filterItem[value.code] = value.value;
        });
        filterItem.Filter = this.data.inputVal;
        this.setData({
          filterItem: filterItem
        });
        this.triggerEvent('getSearchResult', filterItem);
      })
    },
    //显示内容
    showKindsOf(options){
      let tempid = options.currentTarget.dataset.id;
      let temp = this.data.arr;
      let temparr = [];
      temp.forEach(value => {
        if(tempid == value.id){
          temparr = value.arr;
        }
      });
      this.closeKindOf(tempid);
      this.setData({
        select_content: temparr
      },()=>{
        // console.log(this.data.select_content);
      })
    },
    //隐藏内容
    closeKindOf(tempid){
      if(this.data.isShowMask){
        this.setData({
          select_height: '0rpx',
          isShowMask: false,
          tempid: tempid,
        })
      }else{
        this.setData({
          isShowMask: true,
          select_height: '300rpx',
          tempid: tempid,
        })
      }
    },
  }
});

4、WXSS代码

/* component/dropDownMenu/index.wxss */
@import "../../Iconfont.wxss";
.search-area {
    padding: 20rpx 20rpx 0 20rpx;
}
.arrow_down {
    height: 16rpx;
    width: 25rpx!important;
    margin-left: 10rpx!important;
    vertical-align: middle;
}

.area-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.area-right {
    flex: 1;
}
.arrow_down {
    height: 16rpx;
    width: 25rpx;
    margin-left: 20rpx;
    vertical-align: middle;
}

.selected-item {
    width: 72rpx;
    display: inline-block;
    font-size: 36rpx;
    color: #fff;
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/**搜索框***/
.weui-search-bar-1 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
}

.search-form {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #dfdfdf;
    box-sizing: border-box;
}

.searchIcon {
    position: absolute;
    top: 24rpx;
    left: 12rpx;
}

.searchInput {
    height: 80rpx;
    padding: 0 10px;
    margin-left: 40rpx;
}

.delsearchIcon {
    position: absolute;
    top: 12rpx;
    right: 10px;
    z-index: 1111;
}

.weui-search-bar__cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12rpx;
    color: #09bb07;
}
.weui-search-bar__label {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    text-align: center;
    color: #9b9b9b;
    line-height: 40px;
    border-radius: 5px;
    background-color: #dfdfdf;
}
.weui-icon-search {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    margin-top:12rpx;
    margin-right:20rpx;
}
.weui-search-bar__text {
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
}



/*下拉菜单开始*/
.menuC {
    position: relative;
    width: 100%;
}
.menuC .flex {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 28rpx;
}
.menuC .title-wrap {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20rpx 0;
    color: white;
}
.menuC .mask {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: black;
    opacity: .3;
    z-index:99;
}
.menuC .select {
    width: 100%;
    /* height: 300rpx; */
    position: absolute;
    background-color: white;
    z-index: 100;
    border-top: 1rpx solid #E6E6E6;
    overflow: auto;
    transition: all .3s ease;
}
.menuC .select-item {
    font-size:30rpx;
    padding:12rpx 0 12rpx 30rpx;
    border-bottom: 1rpx solid #eeeeee;
}
.showFourSize{
    /*max-width: 100px;*/
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}