微信小程序自定义底部tarbar的代码实现
一、什么是底部tarbar？
底部tarbar是微信小程序中经常见到的一种页面导航方式，通常位于页面底部，包含多个可切换的tab项，每个tab项代表一个页面。底部tarbar在实现多个页面间的切换、提供导航等方面都非常方便，因此被广泛应用于微信小程序中。
二、如何自定义底部tarbar？
微信小程序提供了自定义tabbar的能力，只需在app.json中进行相应的配置即可。下面我们来看一下具体的实现代码。
1. app.json中配置
在app.json中添加"tabBar"字段，用于配置底部tabbar，包括tabbar的整体样式、每个tab项的样式等。
{
"tabBar": {
"color": "#999999",
"selectedColor": "#4D9FFF",
"backgroundColor": "#ffffff",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/tabbar/home.png",
"selectedIconPath": "/images/tabbar/home_sel.png"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "/images/tabbar/category.png",
"selectedIconPath": "/images/tabbar/category_sel.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "/images/tabbar/cart.png",
"selectedIconPath": "/images/tabbar/cart_sel.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/images/tabbar/mine.png",
"selectedIconPath": "/images/tabbar/mine_sel.png"
}
]
}
}
以上代码中，在tabBar中设置了color、selectedColor、backgroundColor、borderStyle等属性，分别表示未选中tab项的文字颜色、选中tab项的文字颜色、tabbar的背景颜色、tabbar的边框样式等。在list中配置了4个tab项，包括每个tab项对应的页面路径、tab项的文字、未选中状态下tab项的图标路径、选中状态下tab项的图标路径等。
2. pages.json中配置
在每个页面的pages.json中，也需要进行相应的配置，用于控制每个页面是否以tabbar的形式展示。
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "我的页面",
"usingComponents": {},
"tabBar": {
"selectedColor": "#4D9FFF",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/tabbar/home.png",
"selectedIconPath": "/images/tabbar/home_sel.png"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "/images/tabbar/category.png",
"selectedIconPath": "/images/tabbar/category_sel.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "/images/tabbar/cart.png",
"selectedIconPath": "/images/tabbar/cart_sel.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/images/tabbar/mine.png",
"selectedIconPath": "/images/tabbar/mine_sel.png"
}
]
}
}
以上代码中，在tabBar中也进行了相应的配置，用于控制当前页面是否以tabbar的形式展示。如果当前页面需要展示tabbar，则在tabBar中配置的项中，需要设置当前页面的pagePath为当前页面的路径。
3. 样式文件中配置
tabbar的样式可以通过样式文件来进行配置，可以对每个tab项进行不同的样式设置，如文字颜色、字体大小、图标大小等。
/* tabbar样式文件 */
.tabbar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #fff;
border-top: 1rpx solid #e0e0e0;
z-index: 100;
}
.tabbar-item {
flex-grow: 1;
flex-basis: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.tabbar-item-text {
font-size: 12px;
margin-top: 2px;
margin-bottom: 2px;
}
.tabbar-item-icon {
width: 24px;
height: 24px;
}
以上代码中，通过.tabbar来设置整个tabbar的样式，通过.tabbar-item来设置每个tab项的样式，包括flex-grow、flex-basis、display、flex-direction、align-items等属性，用于控制每个tab项的排列方式、布局等。通过.tabbar-item-icon和.tabbar-item-text来设置每个tab项图标和文字的样式。
三、底部tarbar的使用
在实际开发中，我们可以在需要展示底部tarbar的页面中，直接使用tabBar标签来展示底部tarbar，无需进行任何额外的配置。
1. tabbar的基本用法
下面是一个简单的底部tabbar示例，包含4个tab项。
<tabBar>
<tabBar-item path="/pages/index/index">
<image src="/images/tabbar/home.png" />
<text>首页</text>
</tabBar-item>
<tabBar-item path="/pages/category/category">
<image src="/images/tabbar/category.png" />
<text>分类</text>
</tabBar-item>
<tabBar-item path="/pages/cart/cart">
<image src="/images/tabbar/cart.png" />
<text>购物车</text>
</tabBar-item>
<tabBar-item path="/pages/mine/mine">
<image src="/images/tabbar/mine.png" />
<text>我的</text>
</tabBar-item>
</tabBar>
以上代码中，使用了tabBar标签来展示底部tabbar，其中使用tabBar-item标签来配置每个tab项，包含path属性表示tab项对应的页面路径，image标签用于展示tab项图标，text标签用于展示tab项文字。
2. tabbar的进阶用法
在实际开发中，我们还可以根据需求对底部tabbar进行进一步的样式定制，如常见的购物车红点提醒、tab项选中状态的样式设置等。
购物车红点提醒：
当用户加入购物车的商品数量不为0时，我们可以在购物车tab项上展示一个红点提醒用户有未付款商品。
<tabBar>
<tabBar-item path="/pages/index/index">
<image src="/images/tabbar/home.png" />
<text>首页</text>
</tabBar-item>
<tabBar-item path="/pages/category/category">
<image src="/images/tabbar/category.png" />
<text>分类</text>
</tabBar-item>
<tabBar-item path="/pages/cart/cart">
<view class="cart-icon">
<image src="/images/tabbar/cart.png" />
<view wx:if="{{ cartCount > 0 }}" class="cart-red-dot">{{ cartCount }}</view>
</view>
<text>购物车</text>
</tabBar-item>
<tabBar-item path="/pages/mine/mine">
<image src="/images/tabbar/mine.png" />
<text>我的</text>
</tabBar-item>
</tabBar>
以上代码中，我们在购物车tab项中使用了一个view标签，用于包裹tab项图标和红点提醒。在view标签中，通过wx:if判断当前购物车数量是否为0，如果不为0，则展示红点提醒，否则不展示任何内容。
tab项选中状态样式的设置：
当用户选中某个tab项时，我们可以对选中的tab项进行样式定制，以便让用户更直观地了解自己当前所在的页面。
<tabBar>
<tabBar-item path="/pages/index/index" active-class="tabbar-active">
<image src="/images/tabbar/home.png" />
<text>首页</text>
</tabBar-item>
<tabBar-item path="/pages/category/category" active-class="tabbar-active">
<image src="/images/tabbar/category.png" />
<text>分类</text>
</tabBar-item>
<tabBar-item path="/pages/cart/cart" active-class="tabbar-active">
<view class="cart-icon">
<image src="/images/tabbar/cart.png" />
<view wx:if="{{ cartCount > 0 }}" class="cart-red-dot">{{ cartCount }}</view>
</view>
<text>购物车</text>
</tabBar-item>
<tabBar-item path="/pages/mine/mine" active-class="tabbar-active">
<image src="/images/tabbar/mine.png" />
<text>我的</text>
</tabBar-item>
</tabBar>
以上代码中，在每个tab项中使用了active-class属性来设置选中状态下的样式，即当用户选中某个tab项时，该tab项会应用class为tabbar-active的样式。我们可以在样式文件中定义tabbar-active的样式，从而实现选中状态的定制化。
四、总结
通过以上代码实现，我们可以很方便地快速搭建底部tarbar，同时实现个性化的样式配置和定制化的功能开发。底部tarbar能够为用户提供便捷的页面导航方式，同时也方便我们进行多页面开发和功能模块的组织。希望以上内容对你有所帮助！