uniapp vue点击tab，实现不同的内容切换

最新推荐文章于 2025-03-21 08:00:00 发布

B2689429488

最新推荐文章于 2025-03-21 08:00:00 发布

阅读量1.1k

点赞数

分类专栏： vue uni 导航条文章标签： js vue

本文链接：https://blog.csdn.net/B2689429488/article/details/124245602

版权

本文介绍如何在uniapp中结合vue，通过点击事件和条件判断，实现不同内容的动态切换，以达到良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//绑定样式，点击事件传值，判断当type为xx值时，进行切换

<view class="tab_box">
	<view :class="{ active: type == 1101 }" @click="onTabSelect(1101)">新任务</view> 
	<view :class="{ active: type == 1200 }" @click="onTabSelect(1200)">配送中

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

B2689429488

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp中根据不同状态跳转不同页面

明思齐的博客

05-29

1450

以下代码，是Tabs标签的展示。绑定 DOM 元素监听事件。

uniapp 切换选项卡并请求不同数据

weixin_51603392的博客

05-08

1281

目录 1.把标题写在视图上 2.把标题写在return里 1.把标题写在视图上 <view class="head-left"> <view :class="index == 0 ? 'left-text' : 'left-title'" @click="load(0)">英皇</view> <view :class="index == 1 ? 'left-text' : 'left-title'" @click="load(1)...

参与评论您还未登录，请先登录后发表或查看评论

在uniapp中进行tab切换并显示不同的数据

qq_57170741的博客

04-14

258

在刷新时看定在哪里触底事件的发生点击获得那种类型。

Vue3+UniApp：在单个页面实现固定 TabBar 的多种方式

最新发布

码农研究僧的博客

03-21

2283

在 UniApp 开发中，tabBar 通常是通过 pages.json 配置的，适用于整个应用的全局导航。然而，在某些场景下，我们可能需要只在特定的页面展示 tabBar，而不会影响其他页面的布局。这就需要使用自定义 tabBar，可以通过 view 组件、uni-segmented-control 组件或 uni-nav-bar 组件等方式来实现。

uni——点击同一个按钮，赋予不同状态（来回切换）

努力、拼搏、奋进

12-14

1167

uni——点击同一个按钮，赋予不同状态（来回切换）

【uniapp】微信小程序点击切换内容栏，切换tab的vue写法

ONLYSRY的博客

07-26

796

代码】微信小程序点击切换内容栏，切换tab的vue写法。

Vue或者Uniapp实现Tab栏切换

qq_44127479的博客

11-08

901

Vue或者Uniapp实现Tab栏切换

uniapp 顶部tab切换菜单

03-16

在uniAPP中实现顶部tab切换菜单，可以提供良好的用户体验，让用户在不同的功能模块之间便捷地跳转。首先，我们来了解下如何在uniAPP中构建这样的组件。基础步骤包括以下几个部分： 1. **创建组件结构**：在项目的...

uniapp vue 不规则tab

06-24

在Vue中，Tab组件通常用于构建页面的导航栏，通过切换不同的Tab来展示不同的内容区域。不规则Tab特效通常是指与传统样式不同的、具有独特设计感或动态效果的Tab组件。这可能涉及到自定义图标、动画过渡、非线性...

uniapp 之 tab栏切换数据渲染不同状态

HQ\(^o^)/的博客

11-27

1819

前面讲解些 tab栏是如何切换的，那下面就给大家演示下它们的状态是怎么切换过来的，很简单上面就是最终的效果图最开始时，后端把全部订单的所有数据，包含一些状态都返给我了，我开始想的，是通过先过滤数组，找到自己需要的状态对应的数组，然后把那个数组传递给tab栏切换到对应的页面，通俗一点就是，把已完成状态的数组，传递给已完成那个组件，进而渲染已完成的数据，但，最终发现，这样一些的话，要 C全部订单的样式，写起来有些麻烦，

uniapp循环对象列表---点击列表切换选中不同状态

m0_49714202的博客

11-02

1083

uniapp循环对象列表---点击列表切换选中不同状态

【uni点击导航切换内容，简单版（仅适用于内容固定而且很少的情况下使用）】

TChildeSeven的博客

07-16

988

uni-app实现仿美团菜单，点击导航切换内容（NO.2）仅适用于内容固定而且很少的情况下使用，导航因为内容少，样式是自己写的，不是滚动型，文字底部高亮是伪类，跟随文字位置点击菜单滚动相应内容在NO.1 1.template，这里只放切换的代码 <view> <view class="plan1 fle bor_bot"> <view class="item fle_all " v-for="(item,index) in menu_name" :class="

前端Vue选项卡tab切换刷新接口列表【切换传不同参数】

m0_49714202的博客

11-01

567

前端Vue选项卡tab切换【切换传不同参数】

uni-app项目数据列表根据不同条件，显示不同背景（含错误做法）

Gao_Chuanhui的博客

03-29

1266

需求分析：请求得到的数据列表，当列表中某个单项满足条件时添加背景颜色效果页面 <view class="tr u-flex" v-for="(item,index) in detailList" :key="index" :class="{active:item.isActive}"> <view class=" u-flex-1 name u-text-left" @click="goMaterial(item,index)"> {

自定义tabs切换显示不同内容(Vue)

weixin_43294560的博客

07-30

1675

使用方法: (1)传入内容为标题的数组 (2)向外传递了一个currentIndex的方法,参数就是当前选中标题的索引根据索引展示不同内容代码示例: <template> <div class='tab'> <div class='tab-tit'> <span v-for='(item,index) in title' :key='index' :class='currentIndex === index?"on":

vue 使用tab切换，tab下的内容展示不同的组件页面

weixin_44934104的博客

12-22

2380

功能说明：点击添加的时候，可根据的不同tab切换到添加不同数据的页面 //HTML部分 <ul class="tab_tit"> <li :class="currentView== 'child1' ?'active':''" @click="tabChange(child1)">图文</li> <li :class="currentView== 'child2' ?'active':''" @click="tabChange(child2

uniapp同一页面切换功能

thigh_d的博客

08-03

5140

相信很多小伙伴在做uniapp的页面的时候都有遇到过这样的问题点击不同的选择出现不同的效果那我们来探讨这个功能是如何实现的。第一步第二步第三步最后 *这样就可以实现效果啦~~~~* ...

uniapp使用uview的u-tabs切换，u-waterfall和u-loadmore，瀑布流分页加载

Leungsintin的博客

09-26

598

在切换tab页时，下面的瀑布流和加载更多组件要同步更新。

利用uView的u-tabs标签进行组件之间的切换