微信小程序自定义下拉菜单组件

WXML

<!-- components/menu/index.wxml -->
<view class="menuC">
    <view class="flex">
        <view wx:for="{{arr}}" wx:key="key" data-id='{{item.id}}' bindtap='showkindsof' class="title-wrap" style="width:{{item_Width}}">
            <view>{{item.content?item.content:item.title}}</view>
        </view>
    </view>
    <!-- mask -->
    <view bindtap='closekindof' class="mask" style="display:{{mask}}" 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" class="select-item" data-name='{{item1.name}}' data-id="{{item1.id}}">{{item1.name}}</view>
    </view>
</view>

WXSS

.menuC {
    border-top: 1rpx solid #E6E6E6;
    border-bottom: 1rpx solid #E6E6E6;
    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;
    border-left:1rpx solid #E6E6E6;
}
.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;
}

JS

// components/menu/index.js
Component({
  lifetimes: {
    attached: function() {
      console.log(this.data.arr.length)
      this.setData({
        item_Width:100/this.data.arr.length + '%'
      },()=>{
        console.log(this.data.item_Width)
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    arr:{
      type:Array,
      value:[
        {
          id:1,title:'待办类型',content:'',arr:[
            {id:101,name:'我负责的'},
            {id:102,name:'我参与的'},
            {id:103,name:'全部'}
          ]
        },
        {
          id:2,title:'待办状态',content:'',arr:[
            {id:201,name:'未完成'},
            {id:202,name:'已完成'},
            {id:203,name:'全部'}
          ]
        },
        {
          id:3,title:'优先级',content:'',arr:[
            {id:301,name:'低'},
            {id:302,name:'中'},
            {id:303,name:'高'},
            {id:304,name:'全部'}
          ]
        },
      ]
    },
  },

  // <picker-date></picker-date>

  /**
   * 组件的初始数据
   */
  data: {
    item_Width:'',
    select_height:'0rpx',
    mask:'none',
    select_content:[]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //选择具体事项
    confirm(options){
      console.log(options.currentTarget.dataset)
      let temparr = this.data.arr
      let id = options.currentTarget.dataset.id +''
      let fatherid = id.substring(0,1) 
      temparr.forEach(value=>{
        if(value.id == fatherid){
          if(options.currentTarget.dataset.name=='全部'){
            value.content = ''
            return value
          }
          value.content = options.currentTarget.dataset.name
          return value
        }else {
          return value
        }
      })
      this.setData({
        arr:temparr,
        select_height:'0rpx',
        mask:'none'
      },()=>{
        //调用外部方法
        this.triggerEvent('confirmout',options.currentTarget.dataset)
      })
      
    },
    //显示内容
    showkindsof(options){
      console.log(options.currentTarget.dataset.id)
      let tempid = options.currentTarget.dataset.id
      let temp = this.data.arr
      let temparr = []
      temp.forEach(value=>{
        if(tempid==value.id){
          temparr = value.arr
        }
      })
      this.setData({
        select_height:'300rpx',
        mask:'block',
        select_content:temparr
      },()=>{
        console.log(this.data.select_content)
      })
    },
    //隐藏内容
    closekindof(){
      this.setData({
        select_height:'0rpx',
        mask:'none'
      })
    },
  }
})

页面调用组件

WXML

<menu bind:confirmout="confirmout" arr="{{value}}"></menu>
<!-- 
    value模板
    value:[
        {
          id:1,title:'待办类型',content:'',arr:[
            {id:101,name:'我负责的'},
            {id:102,name:'我参与的'},
            {id:103,name:'全部'}
          ]
        },
        {
          id:2,title:'待办状态',content:'',arr:[
            {id:201,name:'未完成'},
            {id:202,name:'已完成'},
            {id:203,name:'全部'}
          ]
        },
        {
          id:3,title:'优先级',content:'',arr:[
            {id:301,name:'低'},
            {id:302,name:'中'},
            {id:303,name:'高'},
            {id:304,name:'全部'}
          ]
        },
      ] -->

JS

const app = getApp()
Page({
  data: {
    
  },
  //确定选择下拉菜单后执行的方法
  confirmout(params){
    console.log('params',params.detail)
  },
  
  onLoad() {
    
  },
})