微信小程式自定義導航欄和模闆

自定義導航欄

微信小程式官方文檔提供的導航是在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模闆命名。

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

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