微信小程序下拉筛选菜单WXDropDownMenu组件

最新推荐文章于 2024-07-03 19:38:04 发布

瑞安市灵犀网络技术有限公司

最新推荐文章于 2024-07-03 19:38:04 发布

阅读量6.7k

点赞数

文章标签：微信小程序下拉筛选菜单

本文链接：https://blog.csdn.net/huangxiujie1234/article/details/52778675

版权

本文介绍了微信小程序中创建下拉筛选菜单WXDropDownMenu的方法，包括布局和交互设计。通过使用dt和dd元素，结合点击事件和z-index实现菜单的显示与隐藏。文章还讨论了高亮选中项、数据源分离以及待完善的功能点，如动画效果和数据处理。提供源码下载和交流平台。

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

先来看下效果图：

效果图

思路与步骤：

布局方面，整体使用dl来写，二级包在dd中，用ul li来写；交互方面，点击某一级菜单，关闭兄弟子菜单，点击某子菜单关闭所有菜单。

1.使用dt做出第一级菜单

2.使用dd嵌套第二级菜单，初始隐藏、position为absolute，使用z-index浮出页面层

/*总菜单容器*/
.menu {
    display: block;
    height: 38px;
}

/*一级菜单*/
.menu dt {
    font-size: 15px;
    float: left;
    /*hack*/
    width: 33%;
    height: 38px;
    border-right: 1px solid #d2d2d2;
    border-bottom: 1px solid #d2d2d2;
    text-align: center;
    background-color: #f4f4f4;
    color: #5a5a5a;
    line-height: 38px;
}

/*二级菜单外部容器样式*/
.menu dd{
    position: absolute;
    width: 100%;
    /*hack*/
    top:39px;
    left:0;
    z-index:999;
}

/*二级菜单普通样式*/
.menu li{
    font-size: 14px;
    line-height: 34px;
    color:<