tab切换是APP开发最常见的功能之一，uniapp中提供了多种形式的tab组件供我们使用。对于简单的页面而言，使用tabbar组件非常方便快捷，可以快速实现底部导航栏的效果。对于比较复杂的页面，我们可以使用tab组件自由定义样式和内容
目录
一、实现思路
二、实现步骤
①view部分展示
三、效果展示
四、简单案例
① div中添加
②JavaScript内容
③css样式展示
④效果展示
Uniapp作为一款跨平台的开发工具，提供了一种简便的制作tabbar滑动切换的方法。本文将介绍UniAPP如何实现tabbar滑动切换，并带有详细的示例代码。
一、实现思路
在tabbar的页面中，当用户进行左右滑动时，能够自动切换到相应的页面。这个过程可以通过Uniapp中的swiper组件实现也可以通过自定义完成，代码非常简单。这里我使用的是原生态开发。
如果想要使用组件开发，可以参考Tabs 标签 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架
二、实现步骤
①view部分展示
- 首先，在项目中找到tabbar的页面，在template中添加以下代码
- template v-for可以不用写在template模板
<view class="welltab">
<!-- tab选项 -->
<view class="flex-around" style="border-bottom: 1px solid #E6E6E8;">
<view v-for="(item, index) in topList" :key="index"
:class="[item.default ? 'screen-item-avtive' : 'screen-item']" @click="changeTabs(item)">{{ item.name
}}</view>
</view>
<!-- 列表 -->
<view v-for="(item, index) in list" class="flex-between a***tab" :key="index">
<view class="flex-colomn">
<view style="color: #333; font-size: 28rpx;font-weight: bold;">{{ item.content }}</view>
<view style="color: #888;font-size: 24rpx; margin-top: 10rpx;">{{ item.time }}</view>
</view>
<view class="">
<view v-if="status == 0">
<text style="font-size: 30rpx; font-weight: bold;">{{ $tools.getUnit(item.price) }}</text>
</view>
<view v-if="status == 1">
<text style="font-size: 30rpx; font-weight: bold;">+{{ $tools.getUnit(item.price) }}</text>
</view>
<view v-if="status == 2">
<text style="font-size: 30rpx; font-weight: bold;">-{{ $tools.getUnit(item.price) }}</text>
</view>
</view>
</view>
</view>②JavaScript 内容
1.toplist表示的是tab顶部的内容
2.list中展示的是跳转后的内容
<script>
export default {
data() {
return {
status: '', // 状态
list: [{
id: 1,
price: 123,
content: '需求任务',
time: '2024-09-09 19:00'
}, {
id: 1,
price: 300,
content: '跑腿订单',
time: '2024-09-09 19:00'
}
],
//展示tab款的内容
topList: [{
name: '全部',
default: true,
// default: false,
id: 0
}, {
name: '收入',
default: false,
// default: true,
id: 1
}, {
name: '支出',
default: false,
// default: true,
id: 2
},]
}
},
methods: {
//点击tab跳转
changeTabs(item) {
let obj = this.topList.find(v => v.default)
if (obj) {
obj.default = false
item.default = true
}
this.status = item.id
// this.getRequestList()
},
}
}
</script>③css中样式展示
- tab顶部文字的样式，文字点击时的样式
<style>
/* 点击文字的颜色 */
.screen-item-avtive {
position: relative;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
color: #428AF6;
letter-spacing: 2rpx;
padding: 24rpx 0;
}
/* 本来展示的颜色 */
.screen-item {
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
color: #333;
letter-spacing: 2rpx;
padding: 24rpx 0;
}
/* 点击的底部线条颜色 */
.screen-item-avtive::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
height: 4rpx;
background-color: #428AF6;
width: 50%;
transform: translateX(-50%);
border-radius: 4rpx;
// transition: all .5s linear;
animation: change 1s linear;
}
/* 底部变化 */
@keyframes change {
0% {
width: 50%;
}
50% {
width: 100%;
}
100% {
width: 50%;
}
}
</style>三、效果展示
四、简单案例
将各个部分的代码添加至页面中，即可展示效果。
① div中添加
<view style="background-color: #fff; padding: 24rpx;">
<view class="flex-grid" style="border-bottom: 1px solid #E6E6E8;">
<view v-for="(item, index) in topList" :key="index"
:class="[item.default ? 'screen-item-avtive' : 'screen-item']" @click="changeTabs(item)">
{{ item.name}}
</view>
</view>
<view v-if="status == 0">
11
<view v-if="status == 1">
22
</view>
</view>②JavaScript内容
<script>
export default {
data() {
return {
//展示tab款的内容
topList: [{
name: '待处理',
default: true,
// default: false,
id: 0
}, {
name: '已处理',
default: false,
// default: true,
id: 1
}]
}
},
methods: {
//点击tab跳转
changeTabs(item) {
let obj = this.topList.find(v => v.default)
if (obj) {
obj.default = false
item.default = true
}
this.status = item.id
// this.getRequestList()
},
}
}
</script>③css样式展示
/* 点击文字的颜色 */
.screen-item-avtive {
position: relative;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
color: #1A1A1A;
letter-spacing: 2rpx;
padding: 24rpx 0;
}
/* 本来展示的颜色 */
.screen-item {
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
color: #333;
letter-spacing: 2rpx;
padding: 24rpx 0;
}
/* 点击的底部线条颜色 */
.screen-item-avtive::after {
content: '';
position: absolute;
left: 25%;
bottom: 0;
height: 4rpx;
background-color: #1A1A1A;
width: 25%;
transform: translateX(-50%);
border-radius: 4rpx;
// transition: all .5s linear;
animation: change 1s linear;
}
/* 底部变化 */
@keyframes change {
0% {
width: 50%;
}
50% {
width: 100%;
}
100% {
width: 50%;
}
}