uniapp - 简单版本自定义tab栏切换

tab切换是APP开发最常见的功能之一,uniapp中提供了多种形式的tab组件供我们使用。对于简单的页面而言,使用tabbar组件非常方便快捷,可以快速实现底部导航栏的效果。对于比较复杂的页面,我们可以使用tab组件自由定义样式和内容

目录

一、实现思路

二、实现步骤

①view部分展示

[②JavaScript 内容](#②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模板
html 复制代码
		<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中展示的是跳转后的内容

javascript 复制代码
<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中样式展示
  1. tab顶部文字的样式,文字点击时的样式
javascript 复制代码
<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>
三、效果展示

相关推荐
NightCyberpunk14 分钟前
Ajax与Vue初步学习
vue.js·学习·ajax
haima9515 分钟前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐23 分钟前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全
徊忆羽菲23 分钟前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5
不爱说话郭德纲29 分钟前
Stylus、Less 和 Sass 的使用与区别
前端·css·面试·less·sass·stylus
凄凄迷人39 分钟前
如何调试 chrome 崩溃日志(MAC)
前端·chrome·macos·crash
蒙特网站43 分钟前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html
理想不理想v1 小时前
前端开发工程师需要学什么?
java·前端·vue.js·webpack·node.js
fhf1 小时前
感觉根本等不到35岁AI就把我裁了
前端·人工智能·程序员
hummhumm1 小时前
第 36 章 - Go语言 服务网格
java·运维·前端·后端·python·golang·java-ee