支付宝小程序底部重新编辑 相当于微信的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',
};
},
});
示意图: