微信小程序自定义tabbar
2022/8/12 1:27:27
本文主要是介绍微信小程序自定义tabbar，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
微信小程序自定义tabbar
官方 custom-tab-bar
规则的tabbar（使用 cover-view等标签来覆盖原生的tabbar，但只能是规则的tabbar）
- app.json中配置 tabbar
"tabBar": {
"custom": true,
"color": "#fff",
"selectedColor": "#6777FD",
"borderStyle": "black",
"backgroundColor": "#30323B",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "assets/images/index.png",
"selectedIconPath": "assets/images/indexChecked.png"
},
{
"pagePath": "pages/my/index",
"text": "我的",
"iconPath": "assets/images/self.png",
"selectedIconPath": "assets/images/selfChecked.png"
}
]
},
- 在项目根目录新建目录：
custom-tab-bar， 并以组件形式新增文件
- custom-tab-bar/index.wxml
<!--miniprogram/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="{{item.pagePath}}" bindtap="switchTab">
<cover-image src="{{selected === item.pagePath ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === item.pagePath ? selectedColor : color}}">{{item.text}}</cover-view>
</cover-view>
</cover-view>
- custom-tab-bar/index.js
Component({
data: {
selected: '/pages/index/index',
color: "#fff",
selectedColor: "#6777FD",
list: [
{
"pagePath": "/pages/index/index",
"text": "首页",
"iconPath": "/assets/images/index.png",
"selectedIconPath": "/assets/images/indexChecked.png"
},
{
"pagePath": "/pages/my/index",
"text": "我的",
"iconPath": "/assets/images/self.png",
"selectedIconPath": "/assets/images/selfChecked.png"
}
]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({ url })
this.setData({
selected: data.index
})
}
}
})
- custom-tab-bar/index.json
{
"component": true
}
- custom-tab-bar/index.wxss
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: #30323B;
display: flex;
padding-bottom: env(safe-area-inset-bottom); /* env css函数 取css自定义属性变量或者设置 */
/*padding-bottom:calc(16rpx + constant(safe-area-inset-bottom));*/
/*padding-bottom:calc(16rpx + env(safe-area-inset-bottom));*/
}
.tab-bar-border {
background-color: rgba(255, 255, 255, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item cover-image {
width: 27px;
height: 27px;
}
.tab-bar-item cover-view {
font-size: 10px;
}
- tab页面：index页面、my页面中使用
- page的json中开启 组件
"usingComponents":{}
- js中使用
// index 自定义tabbar
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: '/pages/index/index'
})
}
// my 自定义tabbar
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: '/pages/my/index'
})
}
不规则的tabbar，使用view标签而非cover-view（cover-view标签，不规则的那部分会看不见）
- app.json中配置 tabbar
"tabBar": {
"custom": true,
"color": "#fff",
"selectedColor": "#6777FD",
"borderStyle": "black",
"backgroundColor": "#30323B",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "assets/images/index.png",
"selectedIconPath": "assets/images/indexChecked.png"
},
{
"pagePath": "pages/search/index",
"iconPath": "assets/images/search.png",
"text": "",
"selectedIconPath": "assets/images/search.png"
},
{
"pagePath": "pages/my/index",
"text": "我的",
"iconPath": "assets/images/self.png",
"selectedIconPath": "assets/images/selfChecked.png"
}
]
},
- 在项目根目录新建目录：
custom-tab-bar， 并以组件形式新增文件
- custom-tab-bar/index.wxml
<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tabBar">
<view class="cont">
<block wx:for="{{list}}" wx:key="index" >
<view data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="{{item.search?'search':'item'}}">
<image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
<view class="txt {{selected === index ? 'selectedColor' : ''}}">{{item.text}}</view>
</view>
<view wx:if="{{item.search}}" class="item"></view>
</block>
</view>
</view>
- custom-tab-bar/index.js
Component({
data: {
selected: 0,
color: "#fff",
selectedColor: "#6777FD",
list: [
{
"pagePath": "/pages/index/index",
"text": "首页",
"iconPath": "/assets/images/index.png",
"selectedIconPath": "/assets/images/indexChecked.png"
},
{
pagePath: "/pages/search/index",
iconPath: "/assets/images/search.png",
selectedIconPath: "/assets/images/search.png",
search: true,
text: ""
},
{
"pagePath": "/pages/my/index",
"text": "我的",
"iconPath": "/assets/images/self.png",
"selectedIconPath": "/assets/images/selfChecked.png"
}
]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({ url })
}
}
})
- custom-tab-bar/index.json
{
"component": true
}
- custom-tab-bar/index.wxss
/* Componet/tabBar/tabBar.wxss */
.tabBar {
z-index: 100;
width: 100%;
position: fixed;
bottom: 0;
font-size: 20rpx;
background: #30323B;
color: #fff;
box-shadow: 0rpx 1rpx 6rpx rgba(255, 255, 255, 0.3);
}
.cont {
margin-top: 10rpx;
padding: 0;
z-index: 0;
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
display: flex;
}
.cont .item {
font-size: 24rpx;
position: relative;
flex: 1;
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;
}
.cont .search {
position: absolute;
}
.cont .item image {
width: 46rpx;
height: 46rpx;
margin: auto
}
.cont .item .txt {
margin-top: 8rpx;
color: #fff;
}
.cont .search {
width: 112rpx;
height: 112rpx;
border-radius: 50%;
position: absolute;
left: 319rpx;
top: -50rpx;
background: radial-gradient(#6D2FFF, #7961FF);
box-shadow: 0 0 30rpx 0 rgb(109, 47, 255);
display: flex;
justify-content: center;
align-items: center;
}
.cont .search image {
width: 70rpx;
height: 70rpx;
z-index: 2;
border-radius: 50%;
}
.cont .item .selectedColor {
color: #6777FD;
}
- tab页面：index页面、my页面中使用
- page的json中开启 组件
"usingComponents":{}
- js中使用
// index 自定义tabbar
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: '/pages/index/index'
})
}
// my 自定义tabbar
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
自定义不规则tabbar（使用普通组件的方式来自定义tabbar）
- 在项目
component目录新建目录：tabbar， 并以组件形式新增文件
- tabbar/index.wxml
<!--component/tabbar/index.wxml-->
<view class="tabBar">
<view class="cont">
<block wx:for="{{list}}" wx:key="index" >
<view data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="{{item.search?'search':'item'}}">
<image src="{{selected === item.pagePath ? item.selectedIconPath : item.iconPath}}"></image>
<view class="txt {{selected === item.pagePath ? 'selectedColor' : ''}}">{{item.text}}</view>
</view>
<view wx:if="{{item.search}}" class="item"></view>
</block>
</view>
</view>
- tabbar/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
selected: {
type: String,
value: ''
},
},
data: {
color: "#fff",
selectedColor: "#6777FD",
list: [
{
"pagePath": "/pages/index/index",
"text": "首页",
"iconPath": "/assets/images/index.png",
"selectedIconPath": "/assets/images/indexChecked.png"
},
{
"pagePath": "/pages/search/index",
"text": "",
"search": true,
"iconPath": "/assets/images/search.png",
"selectedIconPath": "/assets/images/search.png"
},
{
"pagePath": "/pages/my/index",
"text": "我的",
"iconPath": "/assets/images/self.png",
"selectedIconPath": "/assets/images/selfChecked.png"
}
]
},
attached() {
},
methods: {
switchTab(e) {
//如果点击当前页面则不进行跳转
const data = e.currentTarget.dataset
const url = data.path
if (this.data.selected == data.index) {
return false
}
wx.switchTab({ url })
}
}
})
- custom-tab-bar/index.json
{
"component": true
}
- custom-tab-bar/index.wxss
/* component/tabBar/index.wxss */
.tabBar {
z-index: 100;
width: 100%;
position: fixed;
bottom: 0;
font-size: 20rpx;
background: #30323B;
color: #fff;
box-shadow: 0rpx 1rpx 6rpx rgba(255, 255, 255, 0.3);
}
.cont {
margin-top: 10rpx;
padding: 0;
z-index: 0;
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
display: flex;
}
.cont .item {
font-size: 24rpx;
position: relative;
flex: 1;
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;
}
.cont .search {
position: absolute;
}
.cont .item image {
width: 46rpx;
height: 46rpx;
margin: auto
}
.cont .item .txt {
margin-top: 8rpx;
color: #fff;
}
.cont .search {
width: 112rpx;
height: 112rpx;
border-radius: 50%;
position: absolute;
left: 319rpx;
top: -50rpx;
background: radial-gradient(#6D2FFF, #7961FF);
box-shadow: 0 0 30rpx 0 rgb(109, 47, 255);
display: flex;
justify-content: center;
align-items: center;
}
.cont .search image {
width: 70rpx;
height: 70rpx;
z-index: 2;
border-radius: 50%;
}
.cont .item .selectedColor {
color: #6777FD;
}
- 在非tab页面，使用该tabbar组件
- page的json中开启 组件
"usingComponents": {
"tabBar":"/component/tabbar/index"
}
- 在wxml中使用
<tabBar/>
这篇关于微信小程序自定义tabbar的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-13微信小程序如何封装接口域名？-icode9专业技术文章分享
- 2024-11-13如何在微信小程序中实现直传功能？-icode9专业技术文章分享
- 2024-11-13如何在小程序的地图组件中添加标记和文字？-icode9专业技术文章分享
- 2024-11-13在微信小程序的地图组件中如何实现自定义标记和气泡？-icode9专业技术文章分享
- 2024-11-01微信小程序教程：零基础入门到实战
- 2024-11-01微信小程序全栈教程：从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view，支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度？-icode9专业技术文章分享
