微信小程序tabbar底部导航

微信小程序重写tabbar底部导航，供大家参考，具体内容如下1.app.js代码如下：editTabBar:function

微信小程序重写tabbar底部导航，供大家参考，具体内容如下

1.app.js代码如下：

 editTabBar: function() {
 var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__;
 0 != s.indexOf("/") && (s = "/" + s);
 for (var n in e.list) e.list[n].selected = !1, e.list[n].pagePath == s && (e.list[n].selected = !0);
 t.setData({
 tabbar: e
 });
 },
 tabBar: {
 color: "#123",
 selectedColor: "#1ba9ba",
 borderStyle: "#1ba9ba",
 backgroundColor: "#fff",
 list: [ {
 pagePath: "/we7/pages/index/index",
 iconPath: "/we7/resource/icon/home.png",
 selectedIconPath: "/we7/resource/icon/homeselect.png",
 text: "首页"
 }, {
 pagePath: "/we7/pages/user/index/index",
 iconPath: "/we7/resource/icon/user.png",
 selectedIconPath: "/we7/resource/icon/userselect.png",
 text: "我的"
 } ]
 },
 globalData: {
 userInfo: null,
 tabbar: {
 color: "#333",
 selectedColor: "#d0501f",
 backgroundColor: "#ffffff",
 borderStyle: "#d5d5d5",
 list: [ {
 pagePath: "/pages/seller/gzt",
 text: "工作台",
 iconPath: "/pages/images/gzt@3x.png",
 selectedIconPath: "/pages/images/gztxz@3x.png",
 selected: !0
 }, {
 pagePath: "/pages/seller/cp/cplb",
 text: "商品",
 iconPath: "/pages/images/dbdc.png",
 selectedIconPath: "/pages/images/dbdcxz.png",
 selected: !1
 }, 
 position: "bottom"
 }
 },

template.wxml

<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.list.length*100}}%; color:{{item.selected?tabbar.selectedColor:tabbar.color}}" url="{{item.pagePath}}" wx:for="{{tabbar.list}}" wx:key="index">
 <image class="tabbar_icon" src="{{item.selected?item.selectedIconPath:item.iconPath}}"></image>
 <text>{{item.text}}</text>
 </navigator>
 </view>
</template>

3.template.wxss

.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;
}

在需要用的页面(wxml)添加如下代码

<import src="template.wxml"></import> <template is="tabbar" data="{{tabbar:tabbar}}"></template>

在需要的样式（wxss）添加如下代码

@import "template.wxss";

在需要的js页面添加如下代码：

var dsq, app = getApp();添加在顶部 tabbar: {},在data中添加 app.editTabBar();在onLoad中添加

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

微信小程序 tabbar 底部导航