微信小程序自定义tabbar底部菜单

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

在自定义 tabBar 模式下，为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。

app.json 中添加 tabBar 字段：

"tabBar": {"custom": true,"color": "#666666","selectedColor": "#FF5F15","backgroundColor": "#ffffff","borderStyle": "white","list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/service/service","text": "服务"},{"pagePath": "pages/order/order","text": "订单"},{"pagePath": "pages/user/user","text": "我的"}]
}

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

添加自定义 tabBar 代码文件，在项目根目录添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

这里我使用了 vant-weapp 的tabbar组件，所以需要先安装下vant：

npm install @vant/weapp

文件代码：

// custom-tab-bar/index.js
Component({data: {active: 0,list: [{text: '首页',url: 'pages/index/index',icon: 'home',activeIcon: 'home-select'},{text: '服务',url: 'pages/service/service',icon: 'service',activeIcon: 'service-select'},{text: '订单',url: 'pages/order/order',icon: 'order',activeIcon: 'order-select'},{text: '我的',url: 'pages/user/user',icon: 'user',activeIcon: 'user-select'},];},methods: {onChange(event) { // 切换tab页面this.setData({ active: event.detail });wx.switchTab({url: this.data.list[event.detail].url.startsWith('/')? this.data.list[event.detail].url: `/${this.data.list[event.detail].url}`,});},init() { // 设置tab的active下标（icon）const page = getCurrentPages().pop();const route = page ? page.route.split('?')[0] : '';const active = this.data.list.findIndex((item) =>(item.url.startsWith('/') ? item.url.substr(1) : item.url) ===`${route}`,);this.setData({ active });},},
});

// custom-tab-bar/index.json
{"component": true,"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index"}
}

<!-- custom-tab-bar/index.wxml -->
<van-tabbar active="{{ active }}" bind:change="onChange"inactive-color="#999999"active-color="#f35000"
><van-tabbar-item class="custom-tab-bar-wrapper" custom-class="custom-tabbar-item" wx:for="{{list}}" wx:key="index"><iconfont slot="icon" name="{{item.icon}}" size="36"/><iconfont slot="icon-active" name="{{item.activeIcon}}" size="36"/><view class="text">{{ item.text }}</view></van-tabbar-item>
</van-tabbar>

/* custom-tab-bar/index.wxss */
.custom-tab-bar-wrapper {display: flex;flex-direction: column;align-items: center;
}.custom-tab-bar-wrapper .text {font-size: 24rpx;
}.custom-tab-bar-wrapper .tab-icon {width: 40rpx;height: 40rpx;
}.custom-tabbar-item {width: 100% !important;
}

在tabbar的page js中的onShow方法中加入：

// pages/service/service.js
onShow() {this.getTabBar().init() // 设置tabbar active状态
},

然后在微信开发者工具，【工具】-> 【构建npm】，重新编译。

tabbar中的图标是用的 iconfont 全局组件，详细使用参考另一篇博客：微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)

微信小程序自定义tabbar底部菜单相关推荐

微信小程序怎么添加底部菜单按钮
继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面. 需要什么: 微信小程序账户电脑一台电脑安装微信开发者工具软 ...
微信小程序自定义tab-bar遇到的问题及解决方案
微信小程序自定义tab-bar遇到的问题及解决方案小程序自定义tab-bar 问题一:需要点击两次才能变成选中装填解决方案: 问题二:真机查看的时候,切换页面的时候会从上到下解决方案: 小程序自 ...
微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
微信小程序自定义tabbar【中间凸起样式】
微信小程序自定义tabBar样式,选中后中间凸起效果预览微信开发文档:自定义tabBar 一.配置信息在 app.json 中的 tabBar 中指定 custom 字段为 true[允许使用自 ...
微信小程序自定义tabbar、自定义导航、分包
自定义tabbar 在项目根目录下创建custom-tab-bar文件夹,在该文件夹下创建组件自定义tabbar作为一个自定义组件进行构建.构建完毕后在app.json中的tabBar选项中配置cu ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...
微信小程序自定义tabBar以及图标-使用vant-weapp
小程序整合vant weapp可以看<微信小程序vant weapp安装与使用> 微信官方文档有介绍自定义tabBar 1.在小程序根目录下创建custom-tab-bar文件夹,并创建以 ...
微信小程序自定义tabBar（实操）
文章目录一.前言二.固定效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json代码三.自定义效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json ...
微信小程序自定义TabBar和NavBar
先看效果图看似和正常开发的小程序布局相同,但代码却不相同,从而在自定义的代码中可以编写在默认模板中不能帮助我们完成的事情. 首先来说TabBar,这个内容的实现很容易,Flex布局嘛,除了这种很普通 ...

微信小程序自定义tabbar底部菜单

微信小程序自定义tabbar底部菜单相关推荐

最新文章

热门文章