微信小程序—自定义嵌套导航（图文）

最新推荐文章于 2024-04-16 20:18:18 发布

原创

最新推荐文章于 2024-04-16 20:18:18 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#自定义嵌套导航

本文详细介绍了如何在微信小程序中创建自定义嵌套导航，包括在classify页面引入组件，新建page和component文件夹，设置一级导航并实现二级导航的功能。通过在component文件夹下创建不同文件夹来组织二级导航，如ziying及其对应的二级导航项jingdian、nvshen和banshou，并提供了相关代码示例。

微信小程序—自定义嵌套导航

效果如下：
在这里插入图片描述
前情须知：在classify页面里引入组件

第一步：在page文件夹新建classify的文件夹和page
在这里插入图片描述
wxml

<view class="container">
  <view class="nav">
    <view 
      class="tab-item {
  
  {currentTab == 0 ? 'active' : ''}}" 
      data-current="0" 
      bindtap='switchTab'
    >
      <text class='item-text'>自营</text>
    </view>
    <view 
      class="tab-item {
  
  {currentTab == 1 ? 'active' : ''}}" 
      data-current="1" 
      bindtap='switchTab'
    >
      <text class='item-text'>严选</text>
    </view>
  </view>
  <view class="content">
    <view wx:if="{
  
  {currentTab == 0}}"><ziying/></view>