小程序下拉菜单组件(含多层筛选)

最新推荐文章于 2024-01-03 14:07:26 发布

kkndyyrolf

最新推荐文章于 2024-01-03 14:07:26 发布

阅读量2.8k

点赞数 2

分类专栏：小程序 javascript 文章标签：小程序

本文链接：https://blog.csdn.net/kkndyyrolf/article/details/106928413

版权

本文档介绍了如何在小程序中实现一个支持多层筛选的下拉菜单组件。该组件可配置化设置弹层内容，支持动态刷新和修改分类标题，并提供API控制弹层显示。内容包括配置、属性说明、数据设置、实例获取以及源码参考。

摘要由CSDN通过智能技术生成

在这里插入图片描述

图例中筛选是另外一个组件

一般在筛选的场景中需要使用下拉菜单，动态设置筛选条件，比如淘宝，京东的产品筛选列表，携程的旅游目的地的筛选列表。

支持

配置化设置弹层内容
支持动态刷新弹层内容
支持动态修改分类标题
支持遮罩层
支持api关闭弹层

配置

wxml模板

<view class="container">
  <ui-list list="{
    {dropdownConfig}}" />
</view>

const Pager = require('../../components/aotoo/core/index')
const mkDropdown = require('../../components/modules/dropdown')

Pager({
   
  data: {
   
    dropdownConfig: mkDropdown({
   
      id: 'xxx',
      data: [
        {
   title: '选项-1'}, 
        {
   title: '选项-2'}, 
        {
   title: '选项-3'},
        {
   title: '选项-3'},
      ],
      
      // 菜单项点击响应方法
      tap(data, index){
   
        if (index === 0) {