-
uniapp实现选项卡切换内容
2021-01-28 14:34:59本篇文章主要练习使用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>
三、最终效果展示
总结
总结不易如遇到问题欢迎指出,必虚心接受,欢迎讨论。。。
-
.NET在Visual Studio的不同Tab之间切换
2009-07-02 13:09:00From: http://www.cnblogs.com/chenxizhang/archive/2009/07/02/1515154.html 我们经常使用Visual Studio,有时候会在里面开了好多个选项卡页面,要进行切换的时候可能比较麻烦。刚才不小心按了一个键,发现有这样... -
选项卡的编写
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事先布局好的代码进行复制过来使用,即可。注意要在
- 表把对应的按钮关联布局起来,把初始值的按钮给一个类,当用户哪一个按钮的时候这一个类,实现随着按钮变化。把按钮和页面一一对应关联起来。按钮的初始值对应的页面也要设定它的初始值。其它页面的一开始是隐藏的,只有在用户点击按钮触发是它们才出现。注意开发者在页面布局的时候要在按钮中的文字提示的内容有和页面的内容关联。
-
.NET :在Visual Studio的不同Tab之间切换
2009-07-02 08:34:00我们经常使用Visual Studio,有时候会在里面开了好多个选项卡页面,要进行切换的时候可能比较麻烦。刚才不小心按了一个键,发现有这样一个切换的方法 按住CTRL+TAB,会出现一个对话框,而且可以预览的。不错 本文由... -
C# 选项卡控件
2017-10-26 09:29:00选项卡控件,它提供一系列操作按钮,单击不同的按钮可以在各个页面之间进行切换。 在Windows Form应用程序中,选项卡控件即“TebPage”控件,它公开“TebPage”属性,表示一个由“TabPage”对象组成的集合。... -
react-native-tab-navigator:一个在场景之间切换的标签栏,用JS编写,可支持跨平台-源码
2021-02-20 12:16:45用于在场景之间切换的选项卡栏,用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... -
Tab(选项卡)的产品设计原则及应用 [2]
2009-12-09 23:09:00否则会导致用户为了比对所需的信息,而不停在标签之间进行切换。 下面这个案例中,BGPatterns (一个在线制作背景图案的网站)tab就用得不是地方。当用户想设计或修改他所制作的背景图案时,必须反复在几个标签... -
QuicKey:通过键盘快捷键或最近使用的(MRU)菜单在Chrome中的最近标签之间跳转-源码
2021-01-30 04:40:07要在两个最近使用的选项卡之间切换,请快速按两次键盘快捷键。 或从最近使用(MRU)列表中选择一个标签,。 您也可以输入/ b搜索或输入/ h搜索。 安装 从安装QuicKey 。 安装扩展程序后,您可以点击 工具栏上的... -
wxpython窗口之间跳转_切换到另一个面板wxpython
2021-03-07 09:02:20我不认为你想使用一个笔记本类型的小部件中的面板来登录,它只会带你进入下一个选项卡。用户可以在不登录的情况...下面是一个使用菜单在面板之间切换的示例:import wximport wx.grid as gridlib###################... -
vuejs2.0 组件基础动态组件 Tab选项卡插件
2018-06-01 18:44:22有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面可以通过 Vue 的&amp;amp;lt;component&amp;amp;gt; 元素加一个特殊的 is 特性来实现 html &amp;amp;lt;... -
移动抽认卡:Udacity的NanoDegree React Native最终项目-源码
2021-02-13 14:04:02手机抽认卡应用 这是BelénPruvost对React Native模块的评估项目,包含在Udacity的React Nanodegree中。 它是一个移动应用程序,允许用户研究抽认卡的集合。 该应用程序将允许用户... 用户可以在问题和答案之间切换 -
简单实用的 VSCODE 插件 ·Rest Client·
2020-10-04 21:16:34你会发现使用Postman 的话会不得不在不同的选项卡之间切换,而且相同的请求传入不同的参数的时候不同的选项卡也不那么容易识别了。这里介绍一款在 ·Visual Studio Code· 上使用的小插件 ·Rest Client·。这款插件... -
在Mac菜单栏上显示名字或者图标让你的Mac电脑更有个人特色
2020-11-04 16:10:453、勾选中将快速用户切换菜单显示为的复选框,然后点击后方的三角形标志根据自己的喜好选择不同的显示方式。 如果选择全名,则添加到用户名详细信息中的名称将显示在屏幕的右上角。 使用帐户名称,您可以使用户名... -
在ArcMap中内容列表的图层展示,图层顺序是怎么来的?
2017-09-19 21:39:27单击选项卡顶部的图标可在这些分组方法之间进行切换。通过查看按钮(激活的按钮会高亮显示)以及内容列表上项目的结构,可以区分处于活动状态的模式。以不同方式列出图层是显示图层相关信息的简单方法。 使用按... -
panorama-tab-groups:Firefox的附件,实现了旧的Tab GroupsPanorama功能。-源码
2021-02-04 22:48:32您可以直观地将相关选项卡分组,并在组之间切换。 当前,对组提供了两种不同的观点: 自由形式(经典)视图 *弹出视图 Panorama Tab Groups是的更新和维护的分支,它是旧的,而新的Firefox Web扩展系统已弃用该... -
iOS开发之设计一个新闻客户端模板(Swift)
2015-11-10 19:27:32这里我为大家设计一个通用方便的新闻客户端的浏览界面,... 该UI界面可以实现3个选项卡之间的切换,可以通过左右的滚动来切换,也可以通过点击上方的tab来切换,在不同的选项卡下可以显示不同的新闻列表。下方会显示按 -
布局管理器之CardLayout(卡片布局管理器)
2015-05-25 09:22:00对于选项卡这个概念大家可能不会陌生,就是在一个窗口中可以切换显示多页不同的内容,但同一时间只能是其中的某一页可见的,这样的一个个的页面就是选项卡。 CardLayout就是类似的这样一个布局管理器,它能够让多个... -
Extjs Tabpanel的使用
2019-05-24 11:58:55本文导读:TabPanel继承于Ext.Panel,Ext.TabPanel就是有选项卡的Panel,可以在选项卡之间切换。它是多个不同内容的容器,任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板,索引... -
Parstagram:Instagram上的Parstagram-源码
2021-03-08 01:29:08用户应在不同的选项卡之间进行切换-使用片段和底部导航视图查看所有帖子(提要视图),撰写(从相机捕获照片)和配置文件选项卡(制作帖子)。 (2分) 用户可以拉动刷新提交给“ Instagram”的最后20条帖子。 ... -
TaskCanvas 250-国内最新的全能版
2020-04-01 13:13:50它显着减少了选项卡在文件中的切换和从一个地方跳到另一个地方: 保持Git分支选项使您可以轻松地在不同分支中的任务之间切换。启用后,它将保存每个任务的当前分支名称,并且当您切换任务时,它将自动切换分支。 ... -
Parstagram:用于CodePath的Instagram克隆(使用Parse)-源码
2021-02-13 06:20:56项目4- InstagramClone InstagramClone是一个使用Parse作为后端的照片共享应用程序。 花费时间:总共花费22个小时 用户故事 完成以下必需的功能: 用户在主屏幕中看到应用程序... 用户应在不同的选项卡之间进行切换 -
15.extjs tabPanel的用法
2017-09-19 16:18:00本文导读:TabPanel继承于Ext.Panel,Ext.TabPanel就是有选项卡的Panel,可以在选项卡之间切换。它是多个不同内容的容器,任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板,索引...
收藏数
155
精华内容
62