微信小程序导航灵活设置技巧，头部文件夹解密

各位哥们儿姐们儿，我最近搞了个微信小程序，遇到了个问题，想请教大家。原本想偷懒用模板来着，但是感觉这个项目有点特别，导航公式要花点心思去弄。后来发现，把它分成几个部分做效率更高！但是新的问题又来了，怎么办？

   
    
   
  
    
    
  
  
    
    
      
         
          {{item.text}}
         
      
    
  
  
  
    
  

快来瞧瞧头部文件夹那儿！这儿有几个得力助手：js、json、wxml 和 wxss。那你猜猜 header.js 是干嘛的? 可不就是管导航信息，记得要把它加到 class=”nav” 中。然后再来看看 header.json，虽小但里面可都是关键信息哈。记住使用哪个组件就得配上相应页面所对应的 json 文件名称标注，如 index.json这种。

 /**
  * 组件的属性列表
  */
 properties: {
  // 当前导航高亮
  navActive: {
   // 类型
   type: Number,
   // 默认值
   value: 0
  }
 },
 data: { 
  // 导航开关 
  navIsShow: false,
  currentIndexNav: 0,
  // floorstatus: false,
  navs: [
   {
    text: '网站首页',
    url: '../index/index'
   },
   {
    text: '招商加盟',
    url: '../join/join'
   },
   {
    text: '关于煮田',
    url: '../about/about'
   },
   {
    text: '煮田美食',
    url: '../food/food'
   },
   {
    text: '最新资讯',
    url: '../news/news'
   },
   {
    text: '门店查询',
    url: '../search/search'
   },
   {
    text: '联系我们',
    url: '../contact/contact'
   },
   {
    text: '视频列表',
    url: '../videoItem/videoItem'
   }
  ]
 },

咱来继续，接下来就在index.wxml那里搞定点啥。这儿得加个叫’navActive’玩意儿，搞清楚在哪个页面呗。如html那儿，把它设为 navActive=0。然后这俩数一样了才能提示你正在看的是哪个页面，是不是挺方便？

{
 "component": true
}

大伙儿！记得在html的头部加入navActive这样页面看起来更炫酷！赶紧试试看！

别忘了我在GitHub的地址！不懂怎么整？那就来瞧瞧我是怎么搞定的！直接戳：[ github地址 ]。

{
 "component": true,
 "usingComponents": {
  "header":"../header/header"
 }
}

好，今儿咱就讲这么多了！期待这些小技巧能帮到大家。下次遇到类似情况，试着弄个导航插件，肯定给你惊喜，哈哈。感谢一直陪伴着我觉得不错的话，快给个赞呗，别忘了跟小伙伴分享。下次再见啦～