// 通过component引用组件
<component :is="item.content"></component>
// 代码如下
<template>
<view class="cust-tabbar">
<swiper class="swiper" :current="currentIndex" @change="changeIndex">
<swiper-item v-for="(item, index) in contentList" :key="index">
<scroll-view style="height: 100%;" scroll-y>
<view>{{ item.content }}</view>
</scroll-view>
</swiper-item>
</swiper>
<view class="bottom-tabbar">
<view class="tabbar-item" v-for="(item, index) in tabbarList" :key="index"
:style="{color: currentIndex === index ? 'red' : '#999'}"
@click="clickItem(index)">
<image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" />
<view>{{ item.label }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentIndex: 0,
contentList: [
{
content: '首页1'
},
{
content: '首页2'
},
{
content: '首页3'
},
{
content: '首页4'
}
],
tabbarList: [
{
label: '首页1',
iconPath: '../static/logo.png',
selectedIconPath: ''
},
{
label: '首页2',
iconPath: '../static/logo.png',
selectedIconPath: ''
},
{
label: '首页3',
iconPath: '../static/logo.png',
selectedIconPath: ''
},
{
label: '首页4',
iconPath: '../static/logo.png',
selectedIconPath: ''
}
]
}
},
methods: {
clickItem(index) {
this.currentIndex = index;
},
changeIndex(e) {
this.currentIndex = e.detail.current;
}
}
}
</script>
<style lang="scss" scoped>
.cust-tabbar {
width: 100%;
height: 100%;
.swiper {
width: 100%;
height: 1140rpx;
}
.content {
width: 100%;
height: 1140rpx;
}
.bottom-tabbar {
position: fixed;
bottom: 0rpx;
width: 100%;
height: 100rpx;
border-top: 1px solid #dddddd;
box-shadow: 0 0 1rpx 2rpx #ddd;
background-color: #fff;
display: flex;
justify-content: space-around;
.tabbar-item {
text-align: center;
padding: 10rpx;
image {
width: 40rpx;
max-height: 40rpx;
}
}
}
}
</style>
uni-app 自定义 tabbar,具备左右滑动切换功能
于 2022-01-14 17:18:17 首次发布