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

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

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

 ②JavaScript 内容

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

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

③css中样式展示

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

三、效果展示