uniapp tab组件

news/2025/1/15 18:45:18/

1. uniapp tab组件

1.1. 直接拆开使用

<template><view><view class="head-nav"><view :class="navIndex==0?'activite':''" @click="checkIndex(0)">设备信息</view><view :class="navIndex==1?'activite':''" @click="checkIndex(1)">专家信息</view><view :class="navIndex==2?'activite':''" @click="checkIndex(2)">故障信息</view><view :class="navIndex==3?'activite':''" @click="checkIndex(3)">缺陷信息</view><view :class="navIndex==4?'activite':''" @click="checkIndex(4)">报废信息</view></view><!-- 内容切换 --><view class="content" v-if="navIndex==0">我是选项1</view><view class="content" v-if="navIndex==1">我是选项2</view><view class="content" v-if="navIndex==2">我是选项3</view><view class="content" v-if="navIndex==3">我是选项4</view><view class="content" v-if="navIndex==4">我是选项5</view></view></template><script>export default {data() {return {navIndex: 0,}},methods: {checkIndex(index) {console.log(index)this.navIndex = index;},}}
</script><style scoped>.head-nav {margin: 20rpx auto;display: flex;justify-content: space-between;align-items: center;color: #CCCCCC;}.activite {color: #04c9c3;}.head-nav>view {padding-bottom: 10rpx;}.content {/* background: #008000; */height: 100%;}
</style>

1.2. 使用scroll-view滑动

<template><view><scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll"><view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id":class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.name}}</view></scroll-view><!-- 内容切换 --><view class="content" v-if="navIndex==0">我是选项1</view><view class="content" v-if="navIndex==1">我是选项2</view><view class="content" v-if="navIndex==2">我是选项3</view><view class="content" v-if="navIndex==3">我是选项4</view><view class="content" v-if="navIndex==4">我是选项5</view><view class="content" v-if="navIndex==5">我是选项6</view><view class="content" v-if="navIndex==6">我是选项7</view><view class="content" v-if="navIndex==7">我是选项8</view><view class="content" v-if="navIndex==8">我是选项9</view></view></template><script>export default {data() {return {navIndex: 0,tabBars: [{name: '关注',id: 'guanzhu'}, {name: '推荐',id: 'tuijian'}, {name: '体育',id: 'tiyu'}, {name: '热点',id: 'redian'}, {name: '财经',id: 'caijing'}, {name: '娱乐',id: 'yule'}, {name: '军事',id: 'junshi'}, {name: '历史',id: 'lishi'}, {name: '本地',id: 'bendi'}],}},methods: {checkIndex(index) {console.log(index)this.navIndex = index;},scroll: function(e) {console.log(e)this.old.scrollTop = e.detail.scrollTop},}}
</script><style scoped>.activite {color: #04c9c3;}.content {/* background: #008000; */height: 300px;}.scroll-view_H {white-space: nowrap;width: 100%;color: #CCCCCC;}.scroll-view-item_H {display: inline-block;width: 20%;height: 50rpx;line-height: 50rpx;text-align: center;padding: 10px 0;}
</style>

1.3. scroll-view + swiper

<template><view><!--顶部导航栏--><scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll"><view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id":class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">{{tab.name}}</view></scroll-view><!-- 内容 --><swiper :current="navIndex" @change="tabChange" class="content"><swiper-item class="swiper_item ">设备信息</swiper-item><swiper-item class="swiper_item ">专家信息</swiper-item><swiper-item class="swiper_item ">故障信息</swiper-item><swiper-item class="swiper_item ">缺陷信息</swiper-item><swiper-item class="swiper_item ">报废信息</swiper-item></swiper></view>
</template><script>export default {data() {return {scrollTop: 0,navIndex: 0,tabBars: [{name: '设备信息',id: 'equipment'}, {name: '专家信息',id: 'expert'}, {name: '故障信息',id: 'fault'}, {name: '缺陷信息',id: 'defect'}, {name: '报废信息',id: 'scrap'}],}},methods: {checkIndex(index) {this.navIndex = index;console.log(index)},scroll: function(e) {console.log(e)this.old.scrollTop = e.detail.scrollTop},//滑动切换swipertabChange(e) {const navIndex = e.detail.currentthis.navIndex = navIndex},}}
</script><style scoped>.activite {color: #04c9c3;}.content {height: 700px;background-color: #04C9C3;color: #fff;}.scroll-view_H {white-space: nowrap;width: 100%;color: #CCCCCC;}.scroll-view-item_H {display: inline-block;width: 20%;height: 50rpx;line-height: 50rpx;text-align: center;padding: 10px 0;font-size: 32rpx;}
</style>

http://www.ppmy.cn/news/1465979.html

相关文章

Python | R 雌雄配对和鱼仔变异马尔可夫链

&#x1f3af;要点 &#x1f3af;马尔可夫链&#xff1a;&#x1f58a;天气状态马尔可夫链和马尔科夫矩阵 | &#x1f58a;多项式隐马尔可夫模型&#xff0c;及其高斯分布 | &#x1f58a;算法&#xff1a;前向、后向、前向-后向、维特比算法 | &#x1f58a;最大似然学习、特…

LeetCode17电话号码的字母组合

题目描述 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 解析 广度优先遍历或者深度优先遍历两种方式&#xff0c;广度优先…

leetcode hot100强化练习 0 - 35

Part I 哈希表 1. 两数之和 class Solution(object):def twoSum(self, nums, target):""":type nums: List[int]:type target: int:rtype: List[int]"""if not nums:return d {}for i, n in enumerate(nums):k target - nif k not in d:d[n]…

17、Spring系列-SpringMVC-请求源码流程

前言 Spring官网的MVC模块介绍&#xff1a; Spring Web MVC是基于Servlet API构建的原始Web框架&#xff0c;从一开始就已包含在Spring框架中。正式名称“ Spring Web MVC”来自其源模块的名称&#xff08;spring-webmvc&#xff09;&#xff0c;但它通常被称为“ Spring MVC…

11.2.0.3RAC 备份集恢复为单实例11.2.0.4_法一:rman备份恢复

关键步骤&#xff1a; 1、移动硬盘格式化成Linux可以识别的文件系统&#xff0c;mount到备份目录&#xff0c;开始rman备份&#xff0c;备份完成后&#xff0c;插到目标服务器挂载&#xff0c; 2、恢复参数文件nomount库&#xff0c;恢复控制文件mount库&#xff0c;restore …

redis 高可用及哨兵模式 @by_TWJ

目录 1. 高可用2. redis 哨兵模式3. 图文的方式让我们读懂这几个算法3.1. Raft算法 - 图文3.2. Paxos算法 - 图文3.3. 区别&#xff1a; 1. 高可用 在 Redis 中&#xff0c;实现 高可用 的技术主要包括 持久化、复制、哨兵 和 集群&#xff0c;下面简单说明它们的作用&#xf…

Leetcode 3169. Count Days Without Meetings

Leetcode 3169. Count Days Without Meetings 1. 解题思路2. 代码实现 题目链接&#xff1a;3169. Count Days Without Meetings 1. 解题思路 这一题的话我们只需要先对meeting的时间进行一下排序&#xff0c;然后不断更新当前连续开会的时间即可。当某一个会议开始时&#…

英伟达A100算力卡性能及应用

英伟达A100是一款高性能计算卡&#xff0c;基于英伟达Ampere架构&#xff0c;专为数据中心和高性能计算领域设计。以下是关于A100的性能参数及应用的详细介绍&#xff1a; 性能参数 架构与制程&#xff1a; 架构&#xff1a;Ampere制程&#xff1a;7纳米核心与频率&#xff1…