tab切換是APP開發最常見的功能之一，uniapp中提供了多種形式的tab組件供我們使用。對于簡單的頁面而言，使用tabbar組件非常方便快捷，可以快速實現底部導航欄的效果。對于比較復雜的頁面，我們可以使用tab組件自由定義樣式和內容

目錄

一、實現思路

二、實現步驟

①view部分展示

?②JavaScript 內容

③css中樣式展示

三、效果展示

---

????????Uniapp作為一款跨平臺的開發工具，提供了一種簡便的制作tabbar滑動切換的方法。本文將介紹UniAPP如何實現tabbar滑動切換，并帶有詳細的示例代碼。

一、實現思路

????????在tabbar的頁面中，當用戶進行左右滑動時，能夠自動切換到相應的頁面。這個過程可以通過Uniapp中的swiper組件實現也可以通過自定義完成，代碼非常簡單。這里我使用的是原生態開發。

? ? ? ? 如果想要使用組件開發，可以參考Tabs 標簽 | uView 2.0 - 全面兼容 nvue 的 uni-app 生態框架 - uni-app UI 框架

二、實現步驟

①view部分展示

1. 首先，在項目中找到tabbar的頁面，在template中添加以下代碼
2. ?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 acctab" :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 = falseitem.default = true}this.status = item.id// 	this.getRequestList()},}}
</script>

③css中樣式展示

1. 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>

三、效果展示

????????

?

? ?? ? ? ?