uniapp实现选项卡切换


文章目录
前言
一、主要实现的步骤及技术讲解
二、完整代码
1.tabs.vue
2.tabs_detail.vue
三、最终效果展示
总结


前言
本篇文章主要练习使用uniapp来实现选项卡切换，并且展示响应的内容并且用到了组件间的传送值，通信。并且附加选项卡第一页的轮播图展示并且实现点击图片预览功能


一、主要实现的步骤及技术讲解
注意：dome涉及到的数据在真实项目中是获取真实的接口数据，此处知识模拟数据实现对应功能。

1、创建项目的公用组件
1、新建components文件夹用于存放公用组件
//tabs.vue
2、在父组件中使用组件
//tabs_detail.vue
引入组件
import tabs from '../../components/tabs.vue'
注册components
components: {
	tabs,
}
使用组件
<tabs/>

2、利用props实现父子组件之间传递值
1、首先在组件tabs.vue中设置props属性
props: {
	tabs: {
		type: Array,
		default: []
	}
}
2、在父组件中将值传递给子组件使用
//tabs_detail.vue
定义数据
tablist: [{
		index: 0,
		value: '第一列',
		isActive: true
	},
	{
		index: 1,
		value: '第二列',
		isActive: false
	},
	{
		index: 2,
		value: '第三列',
		isActive: false
	}
],
传递值
<tabs :tabs='tablist'/>

3、根据数据显示不同选项卡内容
通过子组件来派发事件来通知父组件，父组件监听事件来实现父子组件通信。
//tabs.vue定义方法
methods:{
	handlerActive(index){
		this.$emit('tabActive',index)
	}
}
//tabs_detail.vue监听方法
<tabs :tabs='tablist' v-on:tabActive='tabActive' />
通过传递的参数索引来切换对应的内容
tabActive(tabIndex) {
	this.tablist.map((value, index) => {
		value.isActive = tabIndex == index ? true : false
	})
	this.contentIndex = tabIndex//内容索引
},
根据索引判断内容
<block v-if="contentIndex==0">内容一</block>
<block v-if="contentIndex==1">内容二</block>
<block v-if="contentIndex==2">内容三</block>

4、实现点击轮播图的对应图片预览功能
使用uniapp自带的swiper在每一轮播项图片中添加点击事件
并且传递当前点击图片可以是一个数值
previewpic(itemsrc){
	uni.previewImage({
		current:itemsrc,
		urls:["../../static/3.png","../../static/4.png"]
	})
},

二、完整代码
1.tabs.vue
<template>
	<view>
		<view class="content_items">
			<view class="content_item" 
				v-for="(item,index) in tabs" 
				:key="item.index" 
				:class="item.isActive ? 'active' : ''"
				@tap="handlerActive(item.index)"
			>
				{{item.value}}
			</view>
		</view>
		<slot></slot>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			tabs: {
				type: Array,
				default: []
			}
		},
		methods:{
			handlerActive(index){
				this.$emit('tabActive',index)
			}
		}
	}
</script>

<style lang="scss">
.content_items {
		display: flex;
		.content_item {
			text-align: center;
			float: left;
			padding: 10rpx 0;
			flex: 1;
		}
	}
	.active {
		color: #EB4450;
		border-bottom: 5rpx solid #DD524D;
	}
</style>

2.tabs_detail.vue
<template>
	<view>
		<view class="content">
			<tabs :tabs='tablist' v-on:tabActive='tabActive' />
				<block v-if="contentIndex==0">
					<view class="swiperr">
						<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" circular="true">
							<swiper-item>
								<view class="swiper-item" @tap="previewpic(0)">
									<image class="images" src="../../static/3.png"></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item" @tap="previewpic(1)">
									<image class="images" src="../../static/4.png"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>	
				</block>
				<block v-if="contentIndex==1">
					第二页内容
				</block>
				<block v-if="contentIndex==2">
					第三页内容
				</block>
			</tabs>
		</view>
	</view>
</template>
<script>
	import tabs from '../../components/Tabs.vue'
	export default {
		data() {
			return {
				tablist: [{
						index: 0,
						value: '第一列',
						isActive: true
					},
					{
						index: 1,
						value: '第二列',
						isActive: false
					},
					{
						index: 2,
						value: '第三列',
						isActive: false
					}
				],
				contentIndex: '',
				images: []
			}
		},
		methods: {
			tabActive(tabIndex) {
				this.tablist.map((value, index) => {
					value.isActive = tabIndex == index ? true : false
				})
				this.contentIndex = tabIndex
			},
			previewpic(itemsrc){
				uni.previewImage({
					current:itemsrc,
					urls:["../../static/3.png","../../static/4.png"]
				})
			}
		},
		components: {
			tabs,
		}
	}
</script>
<style lang="scss">
	swiper {
		height: 400rpx;
		image {
			width: 100%;
		}
	}
</style>

三、最终效果展示


总结
总结不易如遇到问题欢迎指出，必虚心接受，欢迎讨论。。。

 From： http://www.cnblogs.com/chenxizhang/archive/2009/07/02/1515154.html 

我们经常使用Visual Studio，有时候会在里面开了好多个选项卡页面，要进行切换的时候可能比较麻烦。刚才不小心按了一个键，发现有这样一个切换的方法
按住CTRL+TAB,会出现一个对话框，而且可以预览的。不错


本文由作者：陈希章 于 2009/7/2 8:33:48 发布在：http://www.cnblogs.com/chenxizhang/
本文版权归作者所有，可以转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 
更多博客文章，以及作者对于博客引用方面的完整声明以及合作方面的政策，请参考以下站点：陈希章的博客中心

《选项卡的编写》

开发工具与关键技术：Visual Studio /SQL数据库

作者：肖春庆

撰写时间：2019年05月23日

在我们使用软件或者访问网站的过程当中，会应用到多种动态的页面切换。一般会使用选项卡，来实现页面切换。它与页面跳转的本质有所不同。选项卡在自身页面上不变的情况下实现内容的切换。而不是页面与页面之间的变换跳转。在页面的一块区域里规划一个视图编写出选项卡一开始的状态。注意要编写用户点击切换的按钮和对应的页面，要计划好视图与控制器的关系。

选项卡实现的功能有很多，它主要是展现出动态效果的页面的切换，用户点击对应的按钮的时候实现相对页面切换。当用户点击第三个切换按钮的时候触发页面切换到对应的第三个页面。如此类推。



首先是视图的编写，应用HTML的布局，应用div标签和li标签进行页面按钮的编写和视图提示的文字。页面1和按钮1是对应的，点击第三个按钮，文字提示的内容是权限分配，所以第三个页面的编写内容和权限匹配的内容是一致。这样用户在使用该页面的时候就容易找到自己要应用的功能。

应用
和
表把对应的按钮关联布局起来，把初始值的按钮给一个类，当用户哪一个按钮的时候这一个类，实现随着按钮变化。把按钮和页面一一对应关联起来。按钮的初始值对应的页面也要设定它的初始值。其它页面的一开始是隐藏的，只有在用户点击按钮触发是它们才出现。注意开发者在页面布局的时候要在按钮中的文字提示的内容有和页面的内容关联。



声明一个函数1获取视图中按钮所在的
标签，又声明一个函数2获取页面所在的标签
，并且使它的初始值为零。如果按钮函数是存在的情况下，注意函数与函数之间是不相同的。声明一个变量记录视图的状态，初始值为零，在不超出页面的情况下实现自增，用户点击间隔了多少个按钮，页面绑定记录i加以间格的数量。把之前的页面进行关闭，记录页面所在的类随着记录用户点击间隔的i而变化，页面所在的类是打开在视图的状态的，也就是说，记录的视图状态的类型是随着用户的应用触发而变化。



选项卡的应用编写有很多种，其中layui就封装了多种大同小异选项卡提供开发者选择。实现把页面布局好，引用插件进来。动态功能部分也要应用进来。在视图中把layui事先布局好的代码进行复制过来使用，即可。注意要在

我们经常使用Visual Studio，有时候会在里面开了好多个选项卡页面，要进行切换的时候可能比较麻烦。刚才不小心按了一个键，发现有这样一个切换的方法
 
按住CTRL+TAB,会出现一个对话框，而且可以预览的。不错
 
 本文由作者：陈希章 于  2009/7/2 8:33:48  发布在：http://www.cnblogs.com/chenxizhang/
 本文版权归作者所有，可以转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 
 更多博客文章，以及作者对于博客引用方面的完整声明以及合作方面的政策，请参考以下站点：陈希章的博客中心 

本文是使用博客同步和管理系统自动于2009/7/2 8:34:11 从 陈希章@博客园 同步过来的。原文地址: http://www.cnblogs.com/chenxizhang/archive/2009/07/02/1515154.html ,发表于2009/7/2 0:34:00.