支付宝小程序底部重新编辑 相当于微信的template

在app.js页面设置tabbar，但是这个要是使用navigateTo却不起作用，因此若想my.navigateTo时，底部导航还有作用，则需要设置一个临时通用文件

App({
  onLaunch(options) {
    // 第一次打开
    // options.query == {number:1}
    console.info('App onLaunch');
  },
  onShow(options) {
    // 从后台被 scheme 重新打开
    // options.query == {number:1}
  },
  editTabBar: function () {
    var tabBar= this.globalData.tabbar;//获取tabbar的数据赋值给tabBar
    var pages = getCurrentPages();//获取当前页面栈的实例，以数组形式按栈的顺序给出
    var currentPage = pages[pages.length - 1];
    var url = '/' + currentPage .route;//获取路径
    for (var i = 0; i < tabBar.items.length; i++) {
      tabBar.items[i].active = false;//令所有的底部导航都是正常状态
      if (tabBar.items[i].pagePath == url) {//若是点击的路径
        tabBar.items[i].active = true;//根据页面地址设置当前页面状态
      }
    }
    //设置数据
    currentPage.setData({
       tabbar:tabBar
    });
  },
  globalData: {
    userInfo: null,
    //配置tabbar  
    tabbar: {
      textColor: "#333",
      selectedColor: "#d0501f",
      backgroundColor: "#ffffff",
      borderStyle: "#d5d5d5",
      items: [
        {
          pagePath: "/pages/index/index",
          name: "首页",
          icon: "/pages/images/home-normal.png",
          activeIcon: "/pages/images/home-active.png"
        },
        {
          pagePath: "/pages/text/text",
          name: "拼团",
          icon: "/pages/images/inni-normal.png",
          activeIcon: "/pages/images/inni-active.png"
        },
        {
          pagePath: "/pages/text2/text2",
          name: "订单",
          icon: "/pages/images/order-normal.png",
          activeIcon: "/pages/images/order-active.png"
        },
        {
          pagePath: "/pages/text3/text3",
          name: "我的",
          icon: "/pages/images/person-normal.png",
          activeIcon: "/pages/images/person-active.png"
        }
      ],
      position: "bottom"
    }
  },
});

建立template文件

template.acss

.tabbar_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100rpx;
    border-top: 0.5rpx solid #d5d5d5;
}
.tabbar_nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 25rpx;
    height: 100%;
}
.tabbar_icon {
    width: 40rpx;
    height: 40rpx;
}

template.axml

<template name="tabbar">
    <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position=='top'?'top:0':'bottom:0'}}">
        <navigator class="tabbar_nav" openType="redirect" style="width:{{1/tabbar.items.length*100}}%; color:{{item.active?tabbar.selectedColor:tabbar.textColor}}" url="{{item.pagePath}}" a:for="{{tabbar.items}}" a:key="index">
            <image class="tabbar_icon" src="{{item.active?item.activeIcon:item.icon}}"></image>
            <text>{{item.name}}</text>
        </navigator>
    </view>
</template>

在所需使用公用底部导航的页面使用
<import src="../template/template.axml"></import> <template is="tabbar" data="{{tabbar:tabbar}}"></template>
如

<import src="../template/template.axml"></import>


<view onTap="tonext">
 首页
</view>
<template is="tabbar" data="{{tabbar:tabbar}}"></template>

acss页面导入

@import "../template/template.acss";

js页面：

var app=getApp();//添加1
Page({
  data:{
    tabbar:{}, //添加2
  },
  onLoad(query) {
    // 页面加载
    console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
    app.editTabBar();//添加3
  },
  tonext:function(){
    my.navigateTo(
      {
        url:'../text/text'
      }
    );
  },
  onReady() {
    // 页面加载完成
  },
  onShow() {
    // 页面显示
  },
  onHide() {
    // 页面隐藏
  },
  onUnload() {
    // 页面被关闭
  },
  onTitleClick() {
    // 标题被点击
  },
  onPullDownRefresh() {
    // 页面被下拉
  },
  onReachBottom() {
    // 页面被拉到底部
  },
  onShareAppMessage() {
    // 返回自定义分享信息
    return {
      title: 'My App',
      desc: 'My App description',
      path: 'pages/index/index',
    };
  },
});

示意图：