uniapp制作简单的tab切换

目录

一、实现思路

二、实现步骤

①view部分展示

 ②JavaScript 内容

③css中样式展示

三、效果展示

四、简单案例

        ①  div中添加

        ②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模板 

		
				
				
					{{ item.name
						}}
				
				
				
					
						{{ item.content }}
						{{ item.time }}
					
					
						
							{{ $tools.getUnit(item.price) }}
						
						
							+{{ $tools.getUnit(item.price) }}
						
						
							-{{ $tools.getUnit(item.price) }}
						
					
				
			

 ②JavaScript 内容

        1.toplist表示的是tab顶部的内容

        2.list中展示的是跳转后的内容

	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()
			},
		}
	}

③css中样式展示

1. tab顶部文字的样式，文字点击时的样式

	/* 点击文字的颜色 */
	.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%;
		}
	}

三、效果展示

四、简单案例

        将各个部分的代码添加至页面中，即可展示效果。

        ①  div中添加

		
					
						
							{{ item.name}}
						
					
					
					        11
					
						    22
					
				

        ②JavaScript内容

	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()
			},
		}
	}

        ③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%;
		}
	}

        ④效果展示