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

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

效果如下：

前情须知：在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>
    <view wx:if="{{currentTab == 1}}"><yanxuan/></view>
  </view>
</view>

js

Page({
  /**
   * 页面的初始数据
   * Linyufan.com
   */
  data: {
    currentTab: 0
  },
  switchTab(e) {
    this.setData({ currentTab: e.currentTarget.dataset.current });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  onShow: function () {
   
  }
})

wxss

.nav{
  display: flex;
  justify-content: space-between;
}
.nav .tab-item{
  flex: 1;
  text-align: center;
}
.active{
  color: #1eb1bb;
  border-bottom: 2px solid #1eb1bb;
}

第二步：新建component文件夹专门用来存放组件并新建ziying和yanxuan文件夹和component

注意是组件不是页面
这时一级导航已经可以点击了

第三步：二级导航
在component文件夹新建jingdian和nvshen和banshou文件夹和component

这三个都是ziying的二级导航

第四步：ziying文件的代码
wxml：

<view class="container">
  <view class="tab-wrapper">
    <view 
      class="tab-item {{currentTab == 0 ? 'active' : ''}}" 
      bindtap='switchTab' 
      data-current="0"
    >经典</view>
    <view 
      class="tab-item {{currentTab == 1 ? 'active' : ''}}" 
      bindtap='switchTab' 
      data-current="1"
    >女神</view>
    <view 
      class="tab-item {{currentTab == 2 ? 'active' : ''}}" 
      bindtap='switchTab' 
      data-current="2"
    >伴手礼</view>
  </view>
  <view class="content-wrapper" wx:if='{{currentTab == 0}}'><jingdian/></view>
  <view class="content-wrapper" wx:if='{{currentTab == 1}}'><nvshen/></view>
  <view class="content-wrapper" wx:if='{{currentTab == 2}}'><banshou/></view>
</view>

js

// component/ziying/ziying.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    currentTab: 0,
    tabItems: [
      {
        id: 0,
        title: '经典'
      },
      {
        id: 1,
        title: '女神'
      },
      {
        id: 2,
        title: '伴手礼'
      }
    ]
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      this.setData({ currentTab: e.currentTarget.dataset.current });
    }
  }
})

wxss

.tab-wrapper{
  display: flex;
  justify-content: space-between;
}
.tab-item{
  flex: 1;
  text-align: center;
  font-size: 28rpx;
}
.active{
  color: #1eb1bb;
  font-weight: bold;
}