【uniapp】开发微信小程序自定义底部tabbar
·
自定义tabBar的性能体验会低于原生tabBar，小程序端非必要不要自定义。但原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。
一、使用流程
1、配置信息
在 pages.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整
"tabBar": {
"color": "#ffffff",
"selectedColor": "#6777FD",
"custom": true,
"list": [{},{},{}]
}
2、添加tabBar代码文件
①自定义公共组件
在components目录下新建组件页面CustomTabBar，在CustomTabBar.vue中开发自定义组件
<template>
<view class="tabBar"></view>
</template>
<script>
export default {
props: {
selected: Number
},
data() {
return {
color: "#fff",
selectedColor: "#6777FD",
list: [{},{},{}]
}
},
methods: {
switchTab(url) {
uni.switchTab({
url
})
}
}
}
</script>
<style lang="scss">
</style>
在需要用到tabBar的页面引入注册并使用组件，通过父子组件通信的方式传参当前是哪个索引页面selected，在子组件通过props接收并使用
<script>
import CustomTabBar from "@/components/CustomTabBar/CustomTabBar.vue"
export default {
components: {
CustomTabBar
}
}
</script>
<template>
<view>
<custom-tab-bar :selected="1" />
</view>
</template>
②自定义tabbar
在根目录创建custom-tab-bar文件夹，里面创建index.js、index.json、index.wxml、index.wxss文件进行开发，而不是vue文件，uniapp编译器会直接拷贝该目录到微信小程序中。
在index.js中：
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
selected: 0,
color: "#fff",
selectedColor: "#6777FD",
list: [{},{},{}]
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({ url })
},
}
})
注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态
onShow() {
// 原生微信小程序
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
// vue2
if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected: 0
})
}
// vue3
if (typeof this.scope.page.getTabBar === 'function' && this.scope.page.getTabBar()) {
this.scope.page.getTabBar().setData({
selected: 0
})
}
}
二、具体案例
在pages.json中：
"tabBar": {
"color": "#ffffff",
"selectedColor": "#6777FD",
"custom": true,
"list": [{
"pagePath": "pages/aboutFind/use/use",
"iconPath": "static/image/icon_find2.png",
"selectedIconPath": "static/image/icon_find1.png",
"text": "使用"
},
{
"pagePath": "pages/index/index",
"iconPath": "static/image/icon_go2.png",
"selectedIconPath": "static/image/icon_go1.png",
"text": "通行"
},
{
"pagePath": "pages/myInfo/myInfo",
"iconPath": "static/image/icon_set2.png",
"selectedIconPath": "static/image/icon_set1.png",
"text": "我的"
}
]
}
①自定义公共组件
在CustomTabBar.vue中：
<template>
<view class="tabBar">
<view class="cont">
<block v-for="(item,index) in list" :key="index" class="cont-item">
<view @click="switchTab(item.pagePath)"
:class="{'search': item.search ? true : false, 'item': !item.search, 'on': selected === index ? true : false, 'off': selected != index ? true : false}">
<image :src=" selected===index ? item.selectedIconPath : item.iconPath">
</image>
<view :class="{'txt': true,'selectedColor': selected === index ? true : false}">{{item.text}}</view>
</view>
</block>
</view>
</view>
</template>
<script>
export default {
props: {
selected: Number
},
data() {
return {
color: "#fff",
selectedColor: "#6777FD",
list: [{
pagePath: "/pages/aboutFind/use/use",
text: "使用",
iconPath: "/static/image/icon_find2.png",
selectedIconPath: "/static/image/icon_find1.png"
},
{
pagePath: "/pages/index/index",
text: "通行",
iconPath: "/static/image/icon_go2.png",
selectedIconPath: "/static/image/icon_go1.png",
search: true
},
{
pagePath: "/pages/myInfo/myInfo",
text: "我的",
iconPath: "/static/image/icon_set2.png",
selectedIconPath: "/static/image/icon_set1.png"
}
]
}
},
methods: {
switchTab(url) {
uni.switchTab({
url
})
}
}
}
</script>
<style lang="scss">
.tabBar {
z-index: 100;
width: 100%;
position: fixed;
bottom: 0;
font-size: 28rpx;
background-color: #fff;
color: #636363;
border-radius: 50rpx 50rpx 0px 0px;
}
.cont {
z-index: 0;
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: 30rpx;
display: flex;
justify-content: space-around;
.item {
font-size: 24rpx;
position: relative;
width: 15%;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
background-color: inherit;
overflow: initial;
justify-content: center;
align-items: center;
padding-top: 20rpx;
}
.item:first-child {
right: 45rpx;
}
.item:last-child {
left: 45rpx;
}
.item image:first-child {
width: 43rpx !important;
height: 43rpx !important;
margin: auto
}
.item image:last-child {
width: 41rpx !important;
height: 43rpx !important;
margin: auto
}
.txt {
margin-top: 20rpx;
}
.on {
position: relative;
}
.on:not(:nth-child(2)):before {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 6rpx;
background-color: #00BCD4;
border-radius: 120rpx !important;
}
.search {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: -50rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.search image {
width: 100rpx !important;
height: 100rpx !important;
z-index: 2;
border-radius: 100%;
}
.search .txt {
margin-top: 26rpx;
}
.selectedColor {
color: #00BCD4;
}
}
</style>
在使用到CustomTabBar.vue组件的三个页面中，如index首页：
<script>
import CustomTabBar from "@/components/CustomTabBar/CustomTabBar.vue"
export default {
components: {
CustomTabBar
}
}
</script>
<template>
<view>
<!-- 传对应页面在list数组中位置的索引值 -->
<custom-tab-bar :selected="1" />
</view>
</template>
②自定义tabbar
在index.js中：
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
selected: 0,
color: "#fff",
selectedColor: "#6777FD",
list: [
{
pagePath: "/pages/aboutFind/use/use",
text: "使用",
iconPath: "/static/image/icon_find2.png",
selectedIconPath: "/static/image/icon_find1.png"
},
{
pagePath: "/pages/index/index",
text: "通行",
iconPath: "/static/image/icon_go2.png",
selectedIconPath: "/static/image/icon_go1.png",
search: true
},
{
pagePath: "/pages/myInfo/myInfo",
text: "我的",
iconPath: "/static/image/icon_set2.png",
selectedIconPath: "/static/image/icon_set1.png"
}
]
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({ url })
},
}
})
在index.json中：
{
"component": true,
"usingComponents": {}
}
在index.wxml中：
<view class="tabBar">
<view class="cont">
<block wx:for="{{list}}" wx:key="index" class="cont-item">
<view data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="{{item.search?'search':'item'}} {{selected === index ? 'on' : 'off'}}">
<image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
<view class="txt {{selected === index ? 'selectedColor' : ''}}">{{item.text}}</view>
</view>
</block>
</view>
</view>
在index.wxss中：
.tabBar {
z-index: 100;
width: 100%;
position: fixed;
bottom: 0;
font-size: 28rpx;
background-color: #fff;
color: #636363;
border-radius: 50rpx 50rpx 0px 0px;
}
.cont {
z-index: 0;
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: 30rpx;
display: flex;
justify-content: space-around;
}
.cont .item {
font-size: 24rpx;
position: relative;
/* flex: 1; */
width: 15%;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
background-color: inherit;
overflow: initial;
justify-content: center;
align-items: center;
padding-top: 20rpx;
}
.cont .item:first-child {
right: 45rpx;
}
.cont .item:last-child {
left: 45rpx;
}
.cont .item image:first-child {
width: 43rpx !important;
height: 43rpx !important;
margin: auto
}
.cont .item image:last-child {
width: 41rpx !important;
height: 43rpx !important;
margin: auto
}
.cont .txt {
margin-top: 20rpx;
}
.cont .on {
position: relative;
}
.cont .on:not(:nth-child(2)):before {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 6rpx;
background-color: #00BCD4;
border-radius:120rpx !important;
}
.cont .search {
position: absolute;
left: 50%;
transform: translate(-50%,0);
top: -50rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cont .search image {
width: 100rpx !important;
height: 100rpx !important;
z-index: 2;
border-radius: 100%;
}
.cont .search .txt {
margin-top: 26rpx;
}
.cont .selectedColor {
color: #00BCD4;
}
在使用到custom-tab-bar的三个页面中：
onShow() {
if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected: 1
})
}
}
三、疑惑
尽管在自定义页面中已经写了页面的配置项，但在 app.json 中的 list 配置页面仍然是必需的，为什么？
这两者的作用不同：
- 自定义页面配置项：这些配置项是针对你自定义的页面的，包括页面路径、页面标题、页面使用的窗口配置等。这些配置项用于描述单个页面的属性和行为。
- app.json 中的 list 配置页面：这些配置项用于描述 TabBar 中的各个页面，包括页面路径、页面标题、页面图标路径等。这些配置项告诉微信客户端哪些页面需要在 TabBar 中显示，并且控制它们在 TabBar 中的位置和样式。
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
19
0- 0
已为社区贡献6条内容
所有评论(0)