uniapp - 简单版本自定义tab栏切换

tab切换是APP开发最常见的功能之一,uniapp中提供了多种形式的tab组件供我们使用。对于简单的页面而言,使用tabbar组件非常方便快捷,可以快速实现底部导航栏的效果。对于比较复杂的页面,我们可以使用tab组件自由定义样式和内容

目录

一、实现思路

二、实现步骤

①view部分展示

 ②JavaScript 内容

③css中样式展示

三、效果展示


        Uniapp作为一款跨平台的开发工具,提供了一种简便的制作tabbar滑动切换的方法。本文将介绍UniAPP如何实现tabbar滑动切换,并带有详细的示例代码。

一、实现思路

        在tabbar的页面中,当用户进行左右滑动时,能够自动切换到相应的页面。这个过程可以通过Uniapp中的swiper组件实现也可以通过自定义完成,代码非常简单。这里我使用的是原生态开发。

        如果想要使用组件开发,可以参考Tabs 标签 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

二、实现步骤
①view部分展示
  1. 首先,在项目中找到tabbar的页面,在template中添加以下代码
  2.  template v-for可以不用写在template模板 
		<view class="welltab"><!-- tab选项 --><view class="flex-around" style="border-bottom: 1px solid #E6E6E8;"><view v-for="(item, index) in topList" :key="index":class="[item.default ? 'screen-item-avtive' : 'screen-item']" @click="changeTabs(item)">{{ item.name}}</view></view><!-- 列表 --><view v-for="(item, index) in list" class="flex-between acctab" :key="index"><view class="flex-colomn"><view style="color: #333; font-size: 28rpx;font-weight: bold;">{{ item.content }}</view><view style="color: #888;font-size: 24rpx; margin-top: 10rpx;">{{ item.time }}</view></view><view class=""><view v-if="status == 0"><text style="font-size: 30rpx; font-weight: bold;">{{ $tools.getUnit(item.price) }}</text></view><view v-if="status == 1"><text style="font-size: 30rpx; font-weight: bold;">+{{ $tools.getUnit(item.price) }}</text></view><view v-if="status == 2"><text style="font-size: 30rpx; font-weight: bold;">-{{ $tools.getUnit(item.price) }}</text></view></view></view></view>
 ②JavaScript 内容

        1.toplist表示的是tab顶部的内容

        2.list中展示的是跳转后的内容

<script>export default {data() {return {status: '', // 状态list: [{id: 1,price: 123,content: '需求任务',time: '2024-09-09 19:00'}, {id: 1,price: 300,content: '跑腿订单',time: '2024-09-09 19:00'}
],//展示tab款的内容topList: [{name: '全部',default: true,// default: false,id: 0}, {name: '收入',default: false,// default: true,id: 1}, {name: '支出',default: false,// default: true,id: 2},]}},methods: {//点击tab跳转changeTabs(item) {let obj = this.topList.find(v => v.default)if (obj) {obj.default = falseitem.default = true}this.status = item.id// 	this.getRequestList()},}}
</script>
③css中样式展示
  1. tab顶部文字的样式,文字点击时的样式
<style>/* 点击文字的颜色 */.screen-item-avtive {position: relative;font-size: 28rpx;font-family: PingFang SC, PingFang SC;font-weight: bold;color: #428AF6;letter-spacing: 2rpx;padding: 24rpx 0;}/* 本来展示的颜色 */.screen-item {font-size: 28rpx;font-family: PingFang SC, PingFang SC;color: #333;letter-spacing: 2rpx;padding: 24rpx 0;}/* 点击的底部线条颜色 */.screen-item-avtive::after {content: '';position: absolute;left: 50%;bottom: 0;height: 4rpx;background-color: #428AF6;width: 50%;transform: translateX(-50%);border-radius: 4rpx;// transition: all .5s linear;animation: change 1s linear;}/* 底部变化 */@keyframes change {0% {width: 50%;}50% {width: 100%;}100% {width: 50%;}}
</style>
三、效果展示

        

 

          

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/215088.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年医疗器械行业分析(京东医疗器械运营数据分析):10月销额增长53%

随着我国整体实力的增强、国民生活水平的提高、人口老龄化、医疗保障体系不断完善等因素的驱动&#xff0c;我国的医疗器械市场增长迅速。 根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;今年10月份&#xff0c;京东平台上医疗器械市场的销量将近1200万&#xff0c;环比…

什么是rocketmq❓

在大规模分布式系统中&#xff0c;各个服务之间的通信是至关重要的&#xff0c;而RocketMQ作为一款分布式消息中间件&#xff0c;为解决这一问题提供了强大的解决方案。本文将深入探讨RocketMQ的基本概念、用途&#xff0c;以及在实际分布式系统中的作用&#xff0c;并对Produc…

SU渲染受到电脑性能影响大吗?如何提高渲染速度

一般3d设计师们在进行设计工作前都需要提供一台高配电脑&#xff0c;那么你这知道su渲染对电脑要求高吗&#xff1f;电脑带不动su怎么解决&#xff1f;su对电脑什么配件要求高&#xff1f;今天这篇文章就详细为大家带来电脑硬件对su建模渲染的影响&#xff0c;以及su渲染慢怎么…

Python基础期末复习 新手 2

虽然age 10在__init__方法中定义了一个局部变量age&#xff0c;但这个局部变量并不会影响类属性age的值。类属性是在类级别上定义的&#xff0c;不属于任何一个实例。因此&#xff0c;在创建实例s1和s2时&#xff0c;它们的age属性值都为类属性的初始值0。 尽管对类的属性值进…

cache教程 5.分布式节点的通信

0.对原教程的一些见解 其回顾完请求流程就是抽象了两个接口&#xff0c;PeerPicker和PeerGetter。这样操作&#xff0c;读者阅读时可能很难快速明白其含义&#xff0c;不好理解为什么就创建出两个接口&#xff0c;感觉会比较疑惑。原教程的评论中也有讨论这点。 本教程就先不创…

如何写好PPT报告

写好PPT的技巧和方法 PPT报告是现代工作和学习中常用的一种形式&#xff0c;它能够通过图文并茂的方式将信息传达给观众。然而&#xff0c;很多人在制作PPT报告时并不知道如何下手&#xff0c;容易出现混乱的情况。为了帮助大家写好PPT报告&#xff0c;下面总结了一些方法和…

Python爬取酷我音乐

&#x1f388; 博主&#xff1a;一只程序猿子 &#x1f388; 博客主页&#xff1a;一只程序猿子 博客主页 &#x1f388; 个人介绍&#xff1a;爱好(bushi)编程&#xff01; &#x1f388; 创作不易&#xff1a;喜欢的话麻烦您点个&#x1f44d;和⭐&#xff01; &#x1f388;…

pytest + yaml 框架 -59.用例失败重跑机制pytest-rerunfailures

前言 有些接口可能不太稳定&#xff0c;第一次跑的时候由于网络原因或者其它原因失败&#xff0c;但是重新跑2次又成功了。 对于这种需要重新跑几次的场景&#xff0c;可以使用用例失败重跑机制&#xff0c;需安装pytest-rerunfailures 插件。 场景示例 失败重跑需要依赖 py…

【Axure原型分享】3D多柱状图_中继器版

今天和大家分享3D多柱状图_中继器版的原型模板&#xff0c;鼠标移入时&#xff0c;对应区域的背景会高亮变色&#xff0c;并且显示对应柱状体的数据。那这个原型是用Axure原生元件制作的&#xff0c;样式交互都可以自行修改&#xff0c;图表数据在中继器表格里填写&#xff0c;…

【二者区别】cuda和cudatoolkit

Pytorch 使用不同版本的 cuda 由于课题的原因&#xff0c;笔者主要通过 Pytorch 框架进行深度学习相关的学习和实验。在运行和学习网络上的 Pytorch 应用代码的过程中&#xff0c;不少项目会标注作者在运行和实验时所使用的 Pytorch 和 cuda 版本信息。由于 Pytorch 和 cuda 版…

mac安装elasticsearch8.x

es下载地址&#xff1a; Past Releases of Elastic Stack Software | Elastic https://www.elastic.co/cn/downloads/past-releases#elasticsearch 选择8.10版本 进入es bin目录下执行启动命令 ./elasticsearch 这个时候localhost:9200无法访问 原因是是因为开启了ssl认证…

R语言,table()函数实现统计每个元素出现的频数+并将最终统计频数结果转换成dataframe数据框形式

在 R中&#xff0c;要统计dataframe数据框中每个元素出现的频数&#xff0c;可以使用table()函数。以下是一个示例&#xff1a; 目录 一、创建数据 二、统计第一列每个元素出现的频数 三、统计第二列每个元素出现的频数 四、将频数结果转换为数据框&#xff0c;并改列名 一…

Cannot find cache named ‘‘ for Builder Redis

当引入 Redissson 时&#xff0c;springCache 缓存机制失效 原因&#xff1a;springCache 默认使用本地缓存 Redisson 使用redis 缓存 最后都转成redis了。。。 总感觉哪不对 两者居然不共存

nodejs+vue+微信小程序+python+PHP的外卖数据分析-计算机毕业设计推荐django

构建一种完全可实现、可操作的开放源代码信息收集系统&#xff0c;帮助记者完成工作任务。采编人员仅需输入所收集到的网址及题目即可迅速启动收集工作并进行信息归类。 2.根据新的数据收集要求&#xff0c;采用云计算技术实现新的收集器的迅速部署。对于资料采集点的改版&…

Java接入ChatGPT接口简单示例

我们定义了一个名为ChartGPTConfig的类&#xff0c;它有两个私有成员变量apiKey和apiUrl&#xff0c;分别表示ChartGPT的API密钥和API URL。 public class ChartGPTConfig {private final String apiKey;private final String apiUrl;public ChartGPTConfig(String apiKey, St…

angular hero学习

install nodehttps://nodejs.org C:\xxx\Downloads\node-v20.10.0-x64 C:\Program Files\nodejs\ C:\angular>node -v v20.10.0 C:\angular>npm -v 10.2.3 install angualr npm install -g angular/cli error # 设置淘宝源npm config set registry https://registry.…

基于Qt的登录页面设计

题目&#xff1a; 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和…

Node.js管理工具npm简单介绍

1.npm用途说明 我们在写node.js项目的时候npm工具是避免不的&#xff0c;那么我们如何使用该工具去管理包文具呢&#xff1f;首先我们先介绍npm工具的几种用途&#xff1a; 可以从npm服务器下载别人编写的第三方包到本地使用。可以从npm服务器下载并安装别人编写的命令行程序…

音乐制作工具 Ableton Live 12中文最新 for Mac

Ableton Live 12 Mac具有直观的界面和强大的功能&#xff0c;使得音乐制作变得更加简单和高效。它支持实时录制、编辑和混音&#xff0c;用户可以在创作过程中随时进行修改和调整。此外&#xff0c;该软件还提供了各种音频效果、虚拟乐器和采样器&#xff0c;使用户可以创建出更…

Springboot入门篇

一、概述 Spring是一个开源框架&#xff0c;2003 年兴起的一个轻量级的Java 开发框架&#xff0c;作者Rod Johnson 。Spring是为了解决企业级应用开发的复杂性而创建的&#xff0c;简化开发。 1.1对比 对比一下 Spring 程序和 SpringBoot 程序。如下图 坐标 Spring 程序中的…