微信小程序自定义导航栏

微信小程序官方文档提供的导航是在app.json文件内定义的，

这里所定义的导航是全局导航栏

但是在实际的项目，更多时候是不需要全局的导航栏，啊就只有自己定义导航栏了

创建一个template文件夹，存放公共的模板，我们自定义的导航栏就是一个导航栏
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内设置即可。

在需要展示的导航栏的页面中直接引入nav.wxml即可，

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

navData是自定义导航栏的数据。直接在data里面设置

data:{
    navData: [{
      name: "首页", //文本
      current: 1, //是否是当前页，0不是  1是
      style: 0, //样式
      ico: '../../images/hone.png', //不同图标
      fn: 'gohome', //对应处理函数
      selecIcon: "../../images/select-home.png"
    }, {
      name: "消息",
      current: 0,
      style: 0,
      ico: '../../images/information.png',
      fn: 'goMes',
      selecIcon: "../../images/select-information.png"
    }, {
      name: "设置",
      current: 0,
      style: 1,
      ico: '../../images/set.png',
      fn: 'goSetting',
      selectIcon: "../../images/select-set.png"
    }],
}

//对应函数
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',
      })
  },

以上是我常用的自定义导航栏，希望能够帮到大家！

欢迎留言