1.目录结构

2.创建custom-tab-bar文件夹

1、在代码根目录下添加入口文件:

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

2.引入vant中 tabBar组件

在app.json或index.json中引入组件，详细介绍见vant 快速上手。

"usingComponents": {
"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

3.编辑custom-tab-bar文件夹下的文件

index.wxml

可以根据自己的喜好做修改 https://vant-contrib.gitee.io/vant-weapp/#/tabbar

根据vant中给予的属性进行修改添加会让你的页面更加动人

<van-tabbar active="{{ active }}" active-color="#FF0000"   bind:change="onChange"  ><van-tabbar-item wx:for="{{list}}" data-path="{{item.pagePath}}"  wx:key="index"  ><imageslot="icon"src="{{item.iconPath}}"mode="aspectFit"style="width: 30px; height: 18px;"/><imageslot="icon-active"src="{{item.selectedIconPath}}"mode="aspectFit"style="width: 30px; height: 18px;"/>{{item.text}}</van-tabbar-item>  </van-tabbar>

index.js

Page({data: {active: 0,list:[ {"pagePath": "pages/index/index","text": "首页","iconPath": "../img/icon/home.png","selectedIconPath": "../img/icon/home-o.png"},{"pagePath": "pages/index/index","text": "电影/影院","iconPath": "../img/icon/电影.png","selectedIconPath": "../img/icon/电影-o.png"},{"pagePath": "pages/index/index","text": "演出","iconPath": "../img/icon/演出.png","selectedIconPath": "../img/icon/演出-o.png"},{"pagePath": "pages/index/index","text": "体育/赛事","iconPath": "../img/icon/赛事.png","selectedIconPath": "../img/icon/赛事-o.png"},{"pagePath": "pages/index/index","text": "我的","iconPath": "../img/icon/我的.png","selectedIconPath": "../img/icon/我的-o.png"}],},onChange(event) {this.setData({ active: event.detail });},
});

还有两个文件根据自己需求做修改

4.在app.json加入tabBar

 "tabBar": {"selected": 0,"color": "#515151","selectedColor": "#d81e06","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "./img/icon/home.png","selectedIconPath": "./img/icon/home-o.png"},{"pagePath": "pages/index/index","text": "电影/影院","iconPath": "./img/icon/电影.png","selectedIconPath": "./img/icon/电影-o.png"},{"pagePath": "pages/index/index","text": "演出","iconPath": "./img/icon/演出.png","selectedIconPath": "./img/icon/演出-o.png"},{"pagePath": "pages/index/index","text": "体育/赛事","iconPath": "./img/icon/赛事.png","selectedIconPath": "./img/icon/赛事-o.png"},{"pagePath": "pages/index/index","text": "我的","iconPath": "./img/icon/我的.png","selectedIconPath": "./img/icon/我的-o.png"}]}

5 预览图

微信小程序+vant的自定义tabBar相关推荐

微信小程序如何设置自定义tabBar
1.创建文件在文件根目录创建组件名字为:custom-tab-bar(指定名称) 2.配置app.json 添加custom属性,让其自定义 "tabBar": {"c ...
【微信小程序开发】自定义tabBar案例（定制消息99+小红心）
微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
文章目录一.自定义组件 1.创建组件 2.引用组件 3.组件和页面区别 4.组件样式 5.data.methods.properties 6.小程序的 data 和 properties 区别 7. ...
微信小程序底部实现自定义动态Tabbar
多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...
微信小程序使用weui自定义底部导航栏，切换不同页面显示不同tabbar
在一个微信小程序中想要用到两种不同的tabbar样式,可以使用微信小程序自带插件tabbar 首先在页面json文件中引入 tabbar {"navigationBarTitleText&q ...
微信小程序之callout自定义气泡
最近闲着踩踩地图的坑,一脚下去差点没从坑里爬起来,然后由于某个原因,去研究了微信小程序里面地图callout 这个属性 callout呢,是在标记的点上面显示一个气泡,作为提示用最后展示下效果 ...
微信小程序scroll-view实现自定义刷新
微信小程序scroll-view实现自定义刷新@TOC 先说原生页面级的刷新通常我们可以利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上 ...
小程序tabbar能放分包路径吗_微信小程序之如何自定义底部tabbar导航
我之前写一个微信小程序,保单万事通,有一个这样的功能 image.png 这个底部导航,如果用小程序自带的tabbar,根本无法实现,所有我想第2种方法来实现微信小程序文档中,有一种这个方法,但是我 ...
微信小程序开发动态设置tabbar
需求描述不同身份的用户登录后,动态更改底部导航栏,也就是 tabbar. 注意不是简单改变 tabbar item 的样式,而是需要更改 item 文字,icon, 关键是跳转链接 pagePat ...

微信小程序+vant的自定义tabBar