微信小程序自定义tabBar（实操）
Posted 源的世界
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序自定义tabBar（实操）相关的知识，希望对你有一定的参考价值。
文章目录
一、前言
一般使用tabBar的样式，固定不能改变。如下固定效果图：
如何自定义自己想要的效果图呢，举个例子。如下自定义效果图：
二、固定效果图实现步骤
使用微信开发者工具-创建项目我就不说了，官方文档很详细。
参考：官方文档介绍
实现步骤
1、添加images文件，添加想要的矢量图（可通过阿里巴巴矢量图免费获取）
2、在app.json文件中，编辑代码
3、保存，刷新即可
完整代码-矢量图
images图片
app.json代码
"pages":[
"pages/index/index",
"pages/logs/index",
"pages/commdt/index",
"pages/cart/index",
"pages/mymessage/index"
],
"window":
"backgroundTextStyle":"light",
"navigationBarTitleText": "测试tabbar",
"navigationBarTextStyle":"white"
,
"tabBar":
"color": "#B6B6B6",
"selectedColor": "#FE9132",
"list": [
"pagePath":"pages/index/index",
"text": "首页",
"iconPath":"/images/sy2.png",
"selectedIconPath": "/images/sy1.png"
,
"pagePath":"pages/commdt/index",
"text": "商品",
"iconPath":"/images/sp2.png",
"selectedIconPath": "/images/sp1.png"
,
"pagePath":"pages/cart/index",
"text": "购物车",
"iconPath":"/images/gwc2.png",
"selectedIconPath": "/images/gwc1.png"
,
"pagePath":"pages/mymessage/index",
"text": "我的",
"iconPath":"/images/wd2.png",
"selectedIconPath": "/images/wd1.png"
]
,
"style": "v2",
"sitemapLocation": "sitemap.json"
三、自定义效果图实现步骤
实现步骤
1、添加images文件，添加想要的矢量图（可通过阿里巴巴矢量图免费获取）
2、在app.json文件中，编辑代码
3、点击加号，在根目录新建一个custom-tab-bar文件夹
4、然后右键该文件夹，点击新建components，输入index，回车，就会自动创建四个文件
此时我们可以看到小程序底部出现，就代表创建成功了。因为他自动识别了tabBar页面。
然后在该目录下编写代码即可
完整代码-矢量图
images图片
app.json代码
"window":
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTitleText": "摆烂鸭",
"navigationBarTextStyle":"black"
,
"tabBar":
"custom": true,
"list":[
"pagePath":"pages/index/index",
"text":"摆鸭"
,
"pagePath":"pages/commdt/index",
"text":"不鸭"
]
,
custom-tab-bar下的代码
index.wxml
<cover-view class="tab-bar">
<!-- <cover-view class="tab-bar-border"></cover-view> -->
<cover-view wx:for="list" wx:key="index" class="tab-bar-item" data-path="item.pagePath" data-index="index" bindtap="switchTab">
<cover-image src="selected === index ? item.selectedIconPath : item.iconPath"></cover-image>
<!-- <cover-view class="currentName == item.name ? 'text-active' : 'tabbar-text'">item.text</cover-view> -->
</cover-view>
</cover-view>
index.css
.tab-bar
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 130rpx;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
justify-content: center;
.tab-bar-item
text-align: center;
display: flex;
flex-direction: column;
.tab-bar-item cover-image
width: 240rpx;
height: 100rpx;
.tab-bar-item cover-view
font-size: 10px;
index.js
Component(
/**
* 组件的属性列表
*/
properties:
,
/**
* 组件的初始数据
*/
data:
selected: 0,
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [
"pagePath": "/pages/index/index",
"iconPath": "/images/by3.png",
"selectedIconPath": "/images/by1.png",
"text": "摆鸭"
,
"pagePath": "/pages/commdt/index",
"iconPath": "/images/by2.png",
"selectedIconPath": "/images/by4.png",
"text": "不鸭"
]
,
/**
* 组件的方法列表
*/
methods:
switchTab(e)
console.log("执行跳转", e);
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab(
url
)
this.setData(
selected: data.index
)
)
使用自定义TaBar
使用自定义TabBar，在切换的TabBar界面的onShow中添加如下代码。如首页中设置 selected: 0，我的中设置 selected: 2。因为 selected: 1 是特殊跳转，点击加号图标时，不再是切换tabbar，而是直接跳转发布界面了。
例如：
/pages/index/index 的.js页面添加代码
/**
* 生命周期函数--监听页面显示
*/
onShow()
if (typeof this.getTabBar === 'function' &&
this.getTabBar())
this.getTabBar().setData(
//唯一标识（其它设置不同的整数）
selected: 0
)
,
/pages/commdt/index 的.js页面添加代码
/**
* 生命周期函数--监听页面显示
*/
onShow()
if (typeof this.getTabBar === 'function' &&
this.getTabBar())
this.getTabBar().setData(
//唯一标识（其它设置不同的整数）
selected: 1
)
,
各位看官》创作不易，点个赞！！！
诸君共勉：万事开头难，只愿肯放弃。
免责声明：本文章仅用于学习参考
WeChat-SmallProgram++：微信小程序自定义底部tabbar
以上是关于微信小程序自定义tabBar（实操）的主要内容，如果未能解决你的问题，请参考以下文章