微信小程序基础-侧边菜单的实现

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

newland9999

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

阅读量9.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序基础文章标签：小程序基础侧边菜单

本文链接：https://blog.youkuaiyun.com/newland9999/article/details/82776144

本文介绍了微信小程序中创建侧边菜单的步骤：通过横向布局将页面分为左右两部分，用数组存储子菜单并利用data-index传递索引，动态设置选中样式，根据选择的菜单显示对应的右侧内容。

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

效果
在这里插入图片描述
思路：
1、整个页面分成左右两个view，横向布局；左侧view用子菜单view一个个填充，纵向布局。
2、子菜单内容存入数组，点击子菜单view，用data-index="{ {index}}"回传数组索引index，把index赋给程序数据selectMenuID。
3、在wxml判断selectMenuID==index时，改变点击子菜单的样式，显示不同的右侧页面
4、右侧view根据selectMenuID用wx:if显示相应页面
具体代码如下：
js:

data:{
     menuItems: ['宝宝奶粉','纸尿裤','母婴专区','营养保健','进口美食','护肤美体','居家日用','婴儿辅食','特惠促销'],
     selectMenuID:0
}

wxml:

 <view class="container">
  <!--左侧栏-->
  <view class="leftview">
    <!--用数组填充左侧菜单页面-->
    <block wx:for="{
  
  {menuItems}}">
      <!--index是默认的数组下标，点击菜单，把index传给selectMenuID，三元表达式判断selectMenuID是否是当前index，子菜单用不同样式-->
      <view class=" {
  
  {selectMenuID == index ? 'activemenu' : 'normalmenu'}}" bindtap="switchToRight"  data-index="{
  
  {index}}">{
  
  {item}}
      </vie