精华内容
下载资源
问答
  • 本篇文章主要练习使用uniapp来实现选项卡切换,并且展示响应内容并且用到了组件间传送值,通信。并且附加选项卡第一页轮播图展示并且实现点击图片预览功能 # 一、需要了解知识点 注意:dome涉及到数据...

    uniapp实现选项卡切换


    前言

    本篇文章主要练习使用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,有时候会里面开了好多个选项卡页面,要进行切换的时候可能比较麻烦。刚才不小心按了一个键,发现有这样...

    我们经常使用Visual Studio,有时候会在里面开了好多个选项卡页面,要进行切换的时候可能比较麻烦。刚才不小心按了一个键,发现有这样一个切换的方法

    按住CTRL+TAB,会出现一个对话框,而且可以预览的。不错

    image

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

    2019-05-27 19:39:30
    选项卡的编写》 开发工具与关键技术:Visual Studio /SQL...选项卡在自身页面上不变的情况下实现内容的切换。而不是页面与页面之间的变换跳转。页面的一块区域里规划一个视图编写出选项卡一开始的状态。注意要编...

    《选项卡的编写》
    开发工具与关键技术:Visual Studio /SQL数据库
    作者:肖春庆
    撰写时间:2019年05月23日
    在我们使用软件或者访问网站的过程当中,会应用到多种动态的页面切换。一般会使用选项卡,来实现页面切换。它与页面跳转的本质有所不同。选项卡在自身页面上不变的情况下实现内容的切换。而不是页面与页面之间的变换跳转。在页面的一块区域里规划一个视图编写出选项卡一开始的状态。注意要编写用户点击切换的按钮和对应的页面,要计划好视图与控制器的关系。
    选项卡实现的功能有很多,它主要是展现出动态效果的页面的切换,用户点击对应的按钮的时候实现相对页面切换。当用户点击第三个切换按钮的时候触发页面切换到对应的第三个页面。如此类推。
    在这里插入图片描述
    首先是视图的编写,应用HTML的布局,应用div标签和li标签进行页面按钮的编写和视图提示的文字。页面1和按钮1是对应的,点击第三个按钮,文字提示的内容是权限分配,所以第三个页面的编写内容和权限匹配的内容是一致。这样用户在使用该页面的时候就容易找到自己要应用的功能。
    应用

    • 表把对应的按钮关联布局起来,把初始值的按钮给一个类,当用户哪一个按钮的时候这一个类,实现随着按钮变化。把按钮和页面一一对应关联起来。按钮的初始值对应的页面也要设定它的初始值。其它页面的一开始是隐藏的,只有在用户点击按钮触发是它们才出现。注意开发者在页面布局的时候要在按钮中的文字提示的内容有和页面的内容关联。
      在这里插入图片描述
      声明一个函数1获取视图中按钮所在的
    • 标签,又声明一个函数2获取页面所在的标签
      ,并且使它的初始值为零。如果按钮函数是存在的情况下,注意函数与函数之间是不相同的。声明一个变量记录视图的状态,初始值为零,在不超出页面的情况下实现自增,用户点击间隔了多少个按钮,页面绑定记录i加以间格的数量。把之前的页面进行关闭,记录页面所在的类随着记录用户点击间隔的i而变化,页面所在的类是打开在视图的状态的,也就是说,记录的视图状态的类型是随着用户的应用触发而变化。
      在这里插入图片描述
      选项卡的应用编写有很多种,其中layui就封装了多种大同小异选项卡提供开发者选择。实现把页面布局好,引用插件进来。动态功能部分也要应用进来。在视图中把layui事先布局好的代码进行复制过来使用,即可。注意要在

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

    我们经常使用Visual Studio,有时候会在里面开了好多个选项卡页面,要进行切换的时候可能比较麻烦。刚才不小心按了一个键,发现有这样一个切换的方法

    按住CTRL+TAB,会出现一个对话框,而且可以预览的。不错

    image

    本文由作者:陈希章 于 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.
    展开全文
  • C# 选项卡控件

    2017-10-26 09:29:00
    选项卡控件,它提供一系列操作按钮,单击不同的按钮可以各个页面之间进行切换。  Windows Form应用程序中,选项卡控件即“TebPage”控件,它公开“TebPage”属性,表示一个由“TabPage”对象组成的集合。...
  • 用于场景之间切换的选项卡栏,用JS编写以提供跨平台支持。 它适用于iOS和Android。 该组件与React Native 0.16和更高版本兼容。 外观与本地导航器略有不同,但某些方面会更好。 也是纯JavaScript。 注:这是...
  • 选项卡(1)

    2019-10-01 04:53:01
    选项卡控件它提供一系列操作按钮,单击不同的按钮可以各个页面之间进行切换选项卡实现的几种方法: html+css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
  • 否则会导致用户为了比对所需信息,而不停标签之间进行切换。 下面这个案例中,BGPatterns (一个在线制作背景图案网站)tab就用得不是地方。当用户想设计或修改他所制作背景图案时,必须反复几个标签...
  • 两个最近使用的选项卡之间切换,请快速按两次键盘快捷键。 或从最近使用(MRU)列表中选择一个标签,。 您也可以输入/ b搜索或输入/ h搜索。 安装 从安装QuicKey 。 安装扩展程序后,您可以点击 工具栏上的...
  • 我不认为你想使用一个笔记本类型小部件中面板来登录,它只会带你进入下一个选项卡。用户可以不登录情况...下面是一个使用菜单面板之间切换的示例:import wximport wx.grid as gridlib###################...
  • 时候,在不同组件之间进行动态切换是非常有用,比如在一个多标签界面可以通过 Vue &amp;amp;amp;lt;component&amp;amp;amp;gt; 元素加一个特殊 is 特性来实现 html &amp;amp;amp;lt;...
  • 手机抽认应用 这是BelénPruvost对React Native模块评估项目,包含UdacityReact Nanodegree中。 它是一个移动应用程序,允许用户研究抽认卡的集合。 该应用程序将允许用户... 用户可以问题和答案之间切换
  • 你会发现使用Postman 的话会不得不在不同的选项卡之间切换,而且相同的请求传入不同的参数的时候不同的选项卡也不那么容易识别了。这里介绍一款在 ·Visual Studio Code· 上使用的小插件 ·Rest Client·。这款插件...
  • 3、勾选中将快速用户切换菜单显示为的复选框,然后点击后方的三角形标志根据自己的喜好选择不同的显示方式。 如果选择全名,则添加到用户名详细信息中的名称将显示屏幕的右上角。 使用帐户名称,您可以使用户名...
  • 单击选项卡顶部图标可这些分组方法之间进行切换。通过查看按钮(激活按钮会高亮显示)以及内容列表上项目结构,可以区分处于活动状态模式。以不同方式列出图层是显示图层相关信息简单方法。 使用按...
  • 您可以直观地将相关选项卡分组,并之间切换。 当前,对组提供了两种不同的观点: 自由形式(经典)视图 *弹出视图 Panorama Tab Groups是的更新和维护的分支,它是旧的,而新的Firefox Web扩展系统已弃用该...
  • 这里我为大家设计一个通用方便的新闻客户端的浏览界面,... 该UI界面可以实现3个选项卡之间的切换,可以通过左右的滚动来切换,也可以通过点击上方的tab来切换,在不同的选项卡下可以显示不同的新闻列表。下方会显示按
  • 对于选项卡这个概念大家可能不会陌生,就是一个窗口中可以切换显示多页不同的内容,但同一时间只能是其中的某一页可见的,这样的一个个的页面就是选项卡。 CardLayout就是类似的这样一个布局管理器,它能够让多个...
  • Extjs Tabpanel使用

    2019-05-24 11:58:55
    本文导读:TabPanel继承于Ext.Panel,Ext.TabPanel就是有选项卡Panel,可以在选项卡之间切换。它是多个不同内容容器,任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板,索引...
  • 用户应在不同的选项卡之间进行切换-使用片段和底部导航视图查看所有帖子(提要视图),撰写(从相机捕获照片)和配置文件选项卡(制作帖子)。 (2分) 用户可以拉动刷新提交给“ Instagram”的最后20条帖子。 ...
  • 它显着减少了选项卡在文件中的切换和从一个地方跳到另一个地方: 保持Git分支选项使您可以轻松地在不同分支中的任务之间切换。启用后,它将保存每个任务的当前分支名称,并且当您切换任务时,它将自动切换分支。 ...
  • 项目4- InstagramClone InstagramClone是一个使用Parse作为后端的照片共享应用程序。 花费时间:总共花费22个小时 用户故事 完成以下必需的功能: 用户在主屏幕中看到应用程序... 用户应在不同的选项卡之间进行切换
  • 15.extjs tabPanel用法

    2017-09-19 16:18:00
    本文导读:TabPanel继承于Ext.Panel,Ext.TabPanel就是有选项卡Panel,可以在选项卡之间切换。它是多个不同内容容器,任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板,索引...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 155
精华内容 62
关键字:

在不同的选项卡之间的切换