微信小程序自定义导航栏和模板

自定义导航栏

微信小程序官方文档提供的导航是在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',
      })
  },

公共模板

例如微信小程序中的底部版权信息。

常见的模板都是放在template文件夹下：

footer.wxml:

<template name="footer">
  <view class="footer">
    <view>xxxxxx</view>
    <view>xxxx</view>
  </view>
</template>

template组件的name属性表示是该模板的名称，因为在一个wxml文件中个创建多个模板，为了方便在引用的时候区分，给template模板命名。

在需要使用footer的文件中引入template：

<import src="../template/footer" />
<template is="nav" />

<template is="nav" />,is属性就是指定某一个模板
既然是公共的模板，那么样式最好是写在公共的样式文件中【app.wxss全局样式文件】

.footer {
  text-align: center;
  font-size: 14px;
  color: #afb0b1;
  padding: 60rpx;
}