微信小程序自定义顶部以及底部tabbar

1.首先建立一个模板，在里边模板的wxml里绘制公共的顶部以及底部
代码如下：

<!--pages/template/template.wxml-->
<template name="top">
<!-- 顶部 -->
   <view style="padding-top:{
  {topcontent.statusBarHeight+topcontent.titleBarHeight}}px;">
  <view class="hh-header" style='background-color:{
  {topcontent.background}};color:{
  {topcontent.color}};'>
    <view class="status-bar" style="height:{
  {topcontent.statusBarHeight}}px"></view>
    <view class="title-bar" style="height:{
  {topcontent.titleBarHeight}}px">
      <view wx:if="{
  {topcontent.isShowBack}}" class='hh-nav-back ico-back' bindtap='goback'></view>
      <view wx:if="{
  {!topcontent.isShowBack}}" class='hh-nav-back'></view>
      <view class="hh-title">{
  {topcontent.name}}</view>
      <view class="hh-nav-right"></view>
    </view>
  </view>
</view>
</template>
<!-- 底部 -->
<template name="tabbar">
    <view class="tabbar_box" style="background-color:{
  {tabbar.backgroundColor}}; border-top-color:{
  {tabbar.borderStyle}}; {
  {tabbar.position == 'top' ? 'top:0' : 'bottom:0'}}">
        <block wx:for="{
  {tabbar.list}}" wx:for-item="item" wx:key="index">
            <view class="tabbar_nav" style="width:{
  {1/tabbar.list.length*100}}%; " bindtap='switchTab' data-url='{
  {item.pagePath}}'>
                <image class="tabbar_icon" src="{
  {item.selected ? item.selectedIconPath : item.iconPath}}"></image>
                <text style="color:{
  {item.selected ? tabbar.selectedColor : tabbar.color}}">{
  {item.text}}</text>
            </view>
        </block>
    </view>
</template>

2.然后在模板的wxss里样式

 /* pa