熟悉微信小程序的朋友可能了解在定義小程序的底欄辛蚊，一般只能固定操作比庄。
在微信小程序的官方文檔中，我們發(fā)現(xiàn)做一個底部固定的菜單是可以在app.json上配置上去進行配置的韭脊，這樣的功能非常強大掸鹅，但是那些菜單的樣式留給我們自定義樣式的卻不多塞帐，
比如一下的這種菜單的話。
在用app.json配置就涼涼了
像這種自定義的菜單呢巍沙，最好的還是做成模板了葵姥，接收數(shù)據(jù)，可復(fù)用也高了句携。首先呢榔幸，模板的作用和具體可以去看下官方文檔。
首先新增一個管理模板的文件夾矮嫉，這里我取名字template削咆，然后tempalte里面新建一個nav.wxml，作為模板
原始的靜態(tài)模板蠢笋，沒有數(shù)據(jù)嵌入的拨齐，接下來我用這個來做成動態(tài)可以，
<view class="flex fix_nav_wp">
?<view class="nav_link" bindtap='gotoCompanyIndex'>
? ?<button class="defalut_btn on_cor">
? ? ?<icon class="iconfont icon-qiugouguanli del_ico idx_ico"></icon> ? ?
? ? ?<text class="txt">今日求購</text>
? ?</button>
?</view>
?<view class="nav_link" bindtap='gotobusinessCard'>
? ?<button class="defalut_btn">
? ? ?<icon class="iconfont icon-mingpianjia del_ico job_ico mp_ico"></icon>
? ? ?<text class="txt">名片</text>
? ?</button>
?</view>
?<view class="nav_link ">
? ?<button class="defalut_btn" bindtap='gotopublish'>
? ? ?<view class="plus_wp">
? ? ? ?<image src='../../images/plus_ico.png' class="plus_ico" />
? ? ?</view>
? ? ?<text class="txt txt_fb">發(fā)布</text>
? ?</button>
?</view>
?<view class="nav_link">
? ?<button class="defalut_btn" bindtap='gotoMessages'>
? ? ?<icon class="iconfont icon-yikeappshouyetubiao35 del_ico man_ico xiaox_ico"></icon>
? ? ?<text ?class="tip_tip">2</text>
? ? ?<text class="txt">消息</text>
? ?</button>
?</view>
?<view class="nav_link">
? ?<button class="defalut_btn" bindtap='bindViewMy'>
? ? ?<icon class="iconfont icon-wode del_ico mine_ico my_ico"></icon>
? ? ?<text class="txt">我的</text>
? ?</button>
?</view>
</view>
app.wxss是這樣的
/* iconfont小圖標(biāo) */
/*為了更好展示昨寞，iconfont的字體文件代碼忽略辣瞻惋，各位道友可以下載時候看*/
page{font-size:26rpx;color:#666;}
.flex{display:-webkit-flex;display: flex;width:100%;}
/* ?底部懸浮導(dǎo)航 ?*/
.fix_nav_wp{height:110rpx;position: fixed;left:0;bottom:0;background:#fff;border-top:1rpx solid #e5e5e5;z-index: 10}
.fix_nav_wp .nav_link{flex:1;}
.fix_nav_wp button{height:110rpx;display: flex;justify-content:space-between;align-items: center;padding:0;font-size:22rpx;
flex-direction: column;color:#999;position: relative;}
.fix_nav_wp .tip_tip{position: absolute;right:25rpx;top:5rpx;min-width:28rpx;line-height:32rpx;
height: 32rpx;padding:0 8rpx;color:#fff;background:#f00;border-radius:50em;border:1rpx solid #fff;}
.fix_nav_wp .nav_link .iconfont{height:60rpx;font-size:56rpx;line-height: 80rpx;color: #c4c8cc;}
.fix_nav_wp .nav_link .plus_wp{width:120rpx;height:120rpx;margin-top: -45rpx;}
.fix_nav_wp .nav_link ?image{width:120rpx;height:120rpx;}
.fix_nav_wp .nav_link .txt{height:50rpx;line-height:40rpx;color: #c4c8cc;}
.fix_nav_wp .nav_link.current .txt{color:#00a2e9;}
.fix_nav_wp .nav_link .del_ico{display: block;}
.fix_nav_wp .nav_link .cur_ico{display: none;}
.fix_nav_wp .nav_link.current .del_ico{display: none;}
.fix_nav_wp .nav_link.current .cur_ico{display: block;color:#00a2e9;}
.fix_nav_wp .nav_link .txt_fb{line-height: 18rpx}
.fix_nav_wp .nav_link .mp_ico{font-size: 50rpx;line-height: 80rpx}
.fix_nav_wp .nav_link .xiaox_ico{font-size: 64rpx;line-height: 70rpx;}
.fix_nav_wp .nav_link .my_ico{font-size: 56rpx;}
.fix_nav_wp .on_cor .del_ico, .fix_nav_wp .on_cor .txt{color: #00a2e9}
/* 清楚按鈕的默認樣式 ?*/
.defalut_btn{background: transparent;border:none;overflow: visible;padding-left:0;padding-right:0;
margin-left:0;margin-right:0;border-radius:0;}
.defalut_btn:after{display: none;}
.text-primary{color:#00a2e9;}
接下來，我們放在index.wxml上展示這個模板编矾，并且在index.js上動態(tài)傳遞底部菜單的參數(shù)等等熟史，這樣在每個需要用到這個模板功能的時候就可以在對應(yīng)頁面的js里面?zhèn)鬟f不同參數(shù)。以下代碼我會盡量注釋窄俏，讓每個看官都能看懂哈，如果不理解碘菜，或是有問題的凹蜈，可以在評論提出哈~
index.js
Page({
?data: {
? ? //定義一個數(shù)組限寞，數(shù)組每一項是對象，對象里面對應(yīng)菜單的數(shù)據(jù)
? ?//管理菜單的每一項的不同參數(shù)仰坦，還有不同布局結(jié)構(gòu)需要的額外的參數(shù)
? ?navData: [ ? ?
? ? ?{
? ? ? ?name: "今日求購", ?//文本
? ? ? ?current: 1, ? ?//是否是當(dāng)前頁履植，0不是 ?1是
? ? ? ?style: 0, ? ? //樣式
? ? ? ?ico: 'icon-qiugouguanli', ?//不同圖標(biāo)
? ? ? ?fn: 'gotoCompanyIndex' ? //對應(yīng)處理函數(shù)
? ? ?}, {
? ? ? ?name: "名片",
? ? ? ?current: 0,
? ? ? ?style: 0,
? ? ? ?ico: 'icon-mingpianjia',
? ? ? ?fn: 'gotobusinessCard'
? ? ?}, {
? ? ? ?name: "發(fā)布",
? ? ? ?current: 0,
? ? ? ?style: 1,
? ? ? ?ico: '',
? ? ? ?fn: 'gotopublish'
? ? ?}, {
? ? ? ?name: "消息",
? ? ? ?current: 0,
? ? ? ?style: 0,
? ? ? ?ico: 'icon-yikeappshouyetubiao35',
? ? ? ?fn: 'gotoMessages',
? ? ? ?msg:2 ? //因為消息是這個“消息”特有的，所以只有這個對象下游msg鍵值
? ? ?}, {
? ? ? ?name: "我的",
? ? ? ?current: 0,
? ? ? ?style: 0,
? ? ? ?ico: 'icon-wode',
? ? ? ?fn: 'bindViewMy'
? ? ?},
? ?],
?},
});
nav.wxml
模板的每一項對應(yīng)一個菜單對象悄晃，也就說玫霎，我們在引入后還需要遍歷navData數(shù)組，將不同參數(shù)讀取出來妈橄，由于我用的是es6的對象拓展符號庶近，它會進行解構(gòu)，可能現(xiàn)在模板看起來有很多人覺得疑問眷蚓，怎么直接就寫對象下的鍵呢鼻种，這個下面我會詳解~
這里主要處理的是，通過區(qū)分style不同布局結(jié)構(gòu)沙热，通過其他結(jié)構(gòu)布局都保持一致叉钥，并且有消息顯示的做特別判斷
<template name="nav">
? ? ?<view class="nav_link" bindtap="{{fn}}">
? ? ? ?<button class="defalut_btn {{current==0?'':'on_cor'}}"> ?
? ? ? ? ?<block wx:if="{{style==0}}">
? ? ? ? ? ? ? ?<icon class="iconfont {{ico}} del_ico idx_ico"></icon>
? ? ? ? ? ? ? ?<text wx:if="{{msg>0}}" class="tip_tip">{{msg}}</text>
? ? ? ? ? ? ? ?<text class="txt">{{name}}</text>
? ? ? ? ?</block>
? ? ? ? ?<block wx:if="{{style==1}}"> ?
? ? ? ? ? ? ? ?<view class="plus_wp">
? ? ? ? ? ? ? ? ?<image src='../../images/plus_ico.png' class="plus_ico" />
? ? ? ? ? ? ? ?</view>
? ? ? ? ? ? ? ?<text class="txt txt_fb">{{name}}</text>
? ? ? ? ?</block>
? ? ? ?</button>
? ? ?</view>
</template>
index.wxml
通過import 將模板引入到index.wxml，我們靜態(tài)數(shù)據(jù)下篙贸，有個最外層類名為flex fix_nav_wp的view投队，所以直接寫過來，當(dāng)然啦爵川，也可以寫在模板上哈蛾洛，現(xiàn)在我們通過直接遍歷navData，template 的is屬性通過前面我們在nav.wxml上的template 的name屬性可以知道我們正在用nav.wxml下的name為nav的模板雁芙，遍歷navData轧膘，當(dāng)前的對象是item,這個item對象就是navData里面的對象，包含有name,style,current等屬性兔甘，通過...item實際將當(dāng)前對象解構(gòu)了
這里簡單說下來下具體...拓展符做了什么谎碍，當(dāng)然啦，要記得再支持es6的瀏覽器打開測試哈洞焙，也可以用webpack打包后測試?yán)?/p>
varobj={a:1,b:2,c:3}console.log(...[obj]);
現(xiàn)在我們就知道了沽损，為什么...item之后拓售，模板只需要寫鍵（屬性名）就可以了，因為他把當(dāng)前的那個對象解構(gòu)了。
源碼鏈接：https://pan.baidu.com/s/1yV8__9o9sR_-jsT7zvuBQg
