微信小程序官方文檔提供的導(dǎo)航是在app.json文件內(nèi)定義的，

這里所定義的導(dǎo)航是全局導(dǎo)航欄

但是在實(shí)際的項(xiàng)目，更多時(shí)候是不需要全局的導(dǎo)航欄，啊就只有自己定義導(dǎo)航欄了

創(chuàng)建一個(gè)template文件夾，存放公共的模板，我們自定義的導(dǎo)航欄就是一個(gè)導(dǎo)航欄
nav.wxml

<template name="nav">
  <view class="nav_link" bindtap="{{fn}}">
    <view class="defalut_btn {{current== 0 ? '' : 'on_cor'}}">
      <block wx:if="{{current == 0}}">
        <image src="{{ico}}" class="iconfont  del_ico idx_ico"></image>
        <view class="txt">{{name}}</view>
      </block>
      <block wx:if="{{current == 1}}">
        <image src="{{selecIcon}}" class="iconfont  del_ico idx_ico"></image>
        <view class="txt txt_fb">{{name}}</view>
      </block>
    </view>
  </view>
</template>

樣式app.wxss內(nèi)設(shè)置即可。

在需要展示的導(dǎo)航欄的頁(yè)面中直接引入nav.wxml即可，

<!-- 底部導(dǎo)航 -->
<import src="../../template/nav" />
<view class="flex fix_nav_wp">
  <block wx:for="{{navData}}" wx:key="">
    <template is="nav" data="{{...item}}" />
  </block>
</view>

navData是自定義導(dǎo)航欄的數(shù)據(jù)。直接在data里面設(shè)置

data:{
    navData: [{
      name: "首頁(yè)", //文本
      current: 1, //是否是當(dāng)前頁(yè)，0不是  1是
      style: 0, //樣式
      ico: '../../images/hone.png', //不同圖標(biāo)
      fn: 'gohome', //對(duì)應(yīng)處理函數(shù)
      selecIcon: "../../images/select-home.png"
    }, {
      name: "消息",
      current: 0,
      style: 0,
      ico: '../../images/information.png',
      fn: 'goMes',
      selecIcon: "../../images/select-information.png"
    }, {
      name: "設(shè)置",
      current: 0,
      style: 1,
      ico: '../../images/set.png',
      fn: 'goSetting',
      selectIcon: "../../images/select-set.png"
    }],
}

//對(duì)應(yīng)函數(shù)
goMes: function() {
    if (this.data.isClicked == false) {
      util.isClick(this);
      wx.reLaunch({
        url: '/pages/message/message',
      })
    } else {
      util.forbid()
    }
  },
  goSetting: function() {
      wx.reLaunch({
        url: '/pages/setting/setting',
      })
  },

以上是我常用的自定義導(dǎo)航欄，希望能夠幫到大家！

歡迎留言