你会微信小程序自定义底部导航栏吗？

一、在目录下创建文件如下图：

tabbar.js：

// pages/tabbar/tabbar.js
const app = getApp();
Component({/*** 组件的属性列表*/properties: {tabbar: {type: Object,value: {"backgroundColor": "#ffffff","color": "#333","selectedColor": "#fca89d","borderStyle": "white","list": [{"pagePath": "/pages/index/index","text": "首页","iconPath": "http://192.168.2.61/wap/rm/images/in.png","selectedIconPath": "http://192.168.2.61/wap/rm/images/ined.png"},{"pagePath": "/pages/mry/mry","text": "美容院","iconPath": "http://192.168.2.61/wap/rm/images/mei.png","selectedIconPath": "http://192.168.2.61/wap/rm/images/meied.png"},{"pagePath": "/pages/shop/shop","text": "商城","iconPath": "http://192.168.2.61/wap/rm/images/shop.png","selectedIconPath": "http://192.168.2.61/wap/rm/images/shoped.png"},{"pagePath": "/pages/mine/mine","text": "我的","iconPath": "http://192.168.2.61/wap/rm/images/min.png","selectedIconPath": "http://192.168.2.61/wap/rm/images/mined.png"}],}}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})

tabbar.json:

{"component": true,"usingComponents": {}
}

tabbar.wxml:

<!--pages/tabbar/tabbar.wxml-->
<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}"><block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}"><navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="navigate"><view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view><image class='special-text-wrapper'></image><text class="txt">{{item.text}}</text></navigator><navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab"><image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image><text class="txt">{{item.text}}</text></navigator></block>
</view>

tabbar.wxss:

/* pages/tabbar/tabbar.wxss */
.tabbar_box { display: flex; flex-direction: row; justify-content: space-around; position: fixed; bottom: 0; left: 0; z-index: 999; width: 100%; height: 98rpx; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); }
.tabbar_box.iphoneX-height { padding-bottom: 66rpx; }
.tabbar_nav { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 20rpx; height: 100%; position: relative; }
.tabbar_icon { width: 40rpx; height: 40rpx; margin:7rpx 0; }
.special-wrapper .tabbar_icon { width: 84rpx; height: 84rpx; }
.special-text-wrapper { width: 45rpx; height: 45rpx; }
.txt{font-size: 26rpx;}

二、然后需要在以下全局文件做下修改

app.js:

//app.js
App({onLaunch: function () {// 隐藏自带的tabbarwx.hideTabBar();},editTabbar: function () {let tabbar = this.globalData.tabBar;let currentPages = getCurrentPages();let _this = currentPages[currentPages.length - 1];let pagePath = _this.route;(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);for (let i in tabbar.list) {tabbar.list[i].selected = false;(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);}_this.setData({tabbar: tabbar});},globalData: {systemInfo: null, //客户端设备信息userInfo: null,tabBar: {"backgroundColor": "#ffffff","color": "#333","selectedColor": "#fca89d","borderStyle": "white","list": [{"pagePath": "/pages/index/index","text": "首页","iconPath": "http://192.168.2.61/wap/rm/images/in.png","selectedIconPath": "http://192.168.2.61/wap/rm/images/ined.png"},{"pagePath": "/pages/mry/mry","text": "美容院","iconPath": "http://192.168.2.61/wap/rm/images/mei.png","selectedIconPath": "http://192.168.2.61/wap/rm/images/meied.png"},{"pagePath": "/pages/shop/shop","text": "商城","iconPath": "http://192.168.2.61/wap/rm/images/shop.png","selectedIconPath": "http://192.168.2.61/wap/rm/images/shoped.png"},{"pagePath": "/pages/mine/mine","text": "我的","iconPath": "http://192.168.2.61/wap/rm/images/min.png","selectedIconPath": "http://192.168.2.61/wap/rm/images/mined.png"}],}}
})

app.json:

 "tabBar": {"backgroundColor": "#ffffff","color": "#333","selectedColor": "#fca89d","borderStyle": "white","list": [{"pagePath": "pages/index/index"},{"pagePath": "pages/mry/mry"},{"pagePath": "pages/shop/shop"},{"pagePath": "pages/mine/mine"}]}

三、需要引入的tabbar,如index.wxml

index.wxml:

<tabbar tabbar="{{tabbar}}"></tabbar>

index.json:

{"usingComponents": {"tabbar": "/component/tabbar/tabbar"}
}

index.js：

const app = getApp()；
Page({data: {tabbar: {},},onLoad: function () {app.editTabbar();}})

最后，
效果图：

你会微信小程序自定义底部导航栏吗？相关推荐

微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
html导航栏代码跳转,微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）...
一.app.json配置这里配置 {"pages": ["pages/usersLists/usersLists","pages/addMember ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...

你会微信小程序自定义底部导航栏吗？

一、在目录下创建文件如下图：

二、然后需要在以下全局文件做下修改

三、需要引入的tabbar,如index.wxml

你会微信小程序自定义底部导航栏吗？相关推荐

最新文章

热门文章

你会微信小程序自定义底部导航栏吗？

一、 在目录下创建文件如下图：

二、然后需要在以下全局文件做下修改

三 、需要引入的tabbar,如index.wxml

你会微信小程序自定义底部导航栏吗？相关推荐

最新文章

热门文章

一、在目录下创建文件如下图：

三、需要引入的tabbar,如index.wxml