微信小程序左右分类列表

最新推荐文章于 2023-12-20 20:49:23 发布

weixin_38168547

最新推荐文章于 2023-12-20 20:49:23 发布

阅读量3.7k

点赞数 4

原文链接：http://www.cnblogs.com/joe235/p/11454114.html

版权

本文介绍了如何在微信小程序中创建一个左右分类列表。左侧显示一级目录，右侧展示对应的一级目录下的二级目录。数据结构采用数组嵌套数组，通过wxml、wxss和js进行交互，动态设置导航项的激活状态，并提供了处理分类切换的事件函数。

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

分类界面，左边是一级目录，右边是一级目录对应的二级目录，根据这个需求，我们数据设计的结构一定是数组嵌套数组，第一个数组包含一级目录数据，嵌套的数组包含的是二级目录的数据。

wxml代码：

<view class="page">

  <!--左侧栏-->
  <view class="nav_left">
    <block wx:for="{
    {cateItems}}" wx:key="unique">
      <!--当前项的id等于item项的id，那个就是当前状态-->
      <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
      <view class="nav_left_items {
    {curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{
    {index}}" data-id="{
    {item.cate_id}}">{
   {item.cate_name}}</view>
    </block>
  </view>
  <!--右侧栏-->
  <view class="nav_right">
  <!--如果有数据，才遍历项-->
    <view wx:if="{
    {cateItems[curIndex].ishaveChild}}">
      <block wx:for="{
    {cateItems[curIndex].children}}" wx:key="unique">
        <view class