小程序多级下拉菜单demo

最新推荐文章于 2025-06-19 15:24:40 发布

并檐私耳语

最新推荐文章于 2025-06-19 15:24:40 发布

阅读量1.9w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序下拉面板demo

本文链接：https://blog.youkuaiyun.com/github_39371177/article/details/80251211

本文介绍如何在微信小程序中开发多级下拉菜单功能。通过修改小程序的data实现菜单选择，动态添加和移除样式，利用数组存储状态并更新页面。难点在于对数据的获取和页面交互的熟练掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司需要开发小程序，中间碰到需要下拉面板选择的功能。在网上寻找demo，然后自己进行了一定的更改。

截图：

不多说，直接上代码

.wxml

<view class='selectarea'>
    <dl class="menu">
      <block wx:for="{
  
  {menuContent}}" wx:for-index='index' wx:for-item='value'>
        <dt class="{
  
  {menuCss[index]}} btnarea" data-index="{
  
  {index}}" bindtap="tapMainMenu">
          <text class='textarea greycolor'>{
  
  {value.title}}</text>
          <image class='{
  
  {rotateRight[index]}} icon-img' src='/images/icon-arrowdown.png'></image>
        </dt>
        <dd class="{
  
  {subMenuDisplay[index]}} font-sm">
          <ul>
            <block wx:for="{
  
  {value.content}}" wx:for-index='indexc' wx:for-item='valuec'>
              <li class="{
  
  {subMenuHighLight[index][indexc]}} font-xs" data-index="{
  
  {index}}-{
  
  {indexc}}" bindtap="tapSubMenu">
                {
  
  {valuec}}
              </li>
            </block>
          </ul>
        </dd>
      </block>
    </dl>
  </view>

.js

 
  // pages/second/index/index.js 
 
//定义初始化下拉列表全部设置为隐藏 
  function initSubMenuDisplay 
  () 
  { 
    
 
 
  return 
  [ 
  'hidden' 
  , 
  'hidden' 
  , 
  'hidden' 
  , 
  'hidden' 
  ]; 
 
 
  }; 
 
//定义初始化menu样式function menuCss() { 
   
    return ['ordinary', 'ordinary', 'ordinary', 'ordinary'];
 
  }; 
 
//定义初始化menu右侧箭头旋转样式
function rotateRight() { 
   
 
  return 
  [ 
  '' 
  , 
  '' 
  , 
  '' 
  , 
  '' 
  , 
  '' 
  ]; 
 
 
  }; 
 
 
  //定义初始化背景遮罩 
 
 
  var cover 
  = 
  "" 
  ; 
 
 
  //定义初始化菜单选中的高亮样式存储 
 
 
  var initSubMenuHighLight 
  = 
  [ 
 
 
  [ 
  ''<
 