微信小程序重写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中添加
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。