之前我的做微信小程式的時候，需要一個底部導航樣式，但是我搜索的時候，大部分都是寫的一些小程式自定義的tabBar的樣式，而當時我在網上有一個地方找到了這個模板，現在介紹給大家參考參考

WXML程式碼：

<import src="../../template/nav" />
  <view class="flex fix_nav_wp">
  <block wx:for="{{navData}}">
      <template is="nav" data="{{...item}}"/>
  </block>
  </view> 

JS程式碼：

Page({
  data: {
    navData: [
      {
        name: "購物車",  //文字
        current: 1,    //是否是當前頁，0不是  1是
        style: 0,     //樣式
        ico: 'icon-qiugouguanli',  //不同圖示
        fn: 'gotoCompanyIndex'   //對應處理函式
      }, {
        name: "我的名片",
        current: 0,
        style: 0,
        ico: 'icon-mingpianjia',
        fn: 'gotobusinessCard'
      }, {
        name: "釋出中心",
        current: 0,
        style: 1,
        ico: '',
        fn: 'gotopublish'
      }, {
        name: "訊息中心",
        current: 0,
        style: 0,
        ico: 'icon-yikeappshouyetubiao35',
        fn: 'gotoMessages'
      }, {
        name: "個人中心",
        current: 0,
        style: 0,
        ico: 'icon-wode',
        fn: 'bindViewMy'
      },
    ],

  },

})
 

WXSS程式碼：

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}