微信小程序侧边栏二级联动

最新推荐文章于 2024-08-16 08:13:55 发布

今天星期八

最新推荐文章于 2024-08-16 08:13:55 发布

阅读量2.6k

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/Missbelover/article/details/93465265

版权

本文介绍了如何在微信小程序中实现侧边栏的二级联动效果，包括样式布局和JS文件的设置，以及数据文件的使用。通过外部模块导入或直接在data中写入数据，可以达到相同的效果。

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

实现效果如下

实现步骤

样式布局(.wxml文件)

 <scroll-view scroll-y="{
   {true}}" 
              style="height:{
   {height}}px;" 
              class="nav-right-menu">
      <!-- 一级菜单 -->
  <view class="nav-left-menu-list" 
        wx:for="{
   {Menu}}" 
        wx:for-index="idMenu" 
        wx:key="id">
    <view data-index="{
   {idMenu}}" 
          class="nav-left-menu-text" 
          bindtap="showmenu2" 
          data-len="{
   {item.childLen}}">
      <text>{
   {
   item.txt}}</text>
    </view>
    <!-- 二级菜单 -->
    <view class="nav-left-secondmenu" 
          style="{
   {menuindex == idMenu ? menustyle : field}}">
      <view class='nav-left-secondmenu-list' 
            wx:for="{
   {item.twoMenu}}" 
            wx:for<