前端Vue自定义等宽标签栏标题栏选项卡

news2024/11/19 9:40:14

前端Vue自定义等宽标签栏标题栏选项卡, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13170

效果图如下:

 

a1c5d103e7cc1c856f403d302aeafc8b.png

5023c39fb7b6f618132779dd0bc1fa88.png

9b29af20c04d35c33ed5da1ce856153c.png

# cc-chooseTab

#### 使用方法

```使用方法

<!-- tabArr:标签数组 current:当前选择序列  tabClick:tab点击事件-->

<cc-chooseTab :tabArr="tabArr" :current="myCurrent" @tabClick="tabClick"></cc-chooseTab>

```

#### HTML代码实现部分

```html

<template>

<view class="page">

<!-- tabArr:标签数组 current:当前选择序列  tabClick:tab点击事件-->

<cc-chooseTab :tabArr="tabArr" :current="myCurrent" @tabClick="tabClick"></cc-chooseTab>

<image style="width: 92vw;margin-left: 4vw; margin-top: 60px;" mode="aspectFill" :src="srcArr[myCurrent]">

</image>

<cc-botToolBar @click="botMenuClick"></cc-botToolBar>

</view>

</template>

<script>

export default {

data() {

return {

myCurrent: 0,

// 新时代大湾区

tabArr: ["新时代", "大湾区", "体育", "暖新闻"],

srcArr: ["../../static/content1.png", "../../static/content2.png", "../../static/content3.png",

"../../static/content4.png"

]

};

},

methods: {

tabClick(flag) {

this.myCurrent = flag;

console.log("点击tab序列 = " + flag);

this.mySrc = this.srcArr[this.myCurrent];

},

botMenuClick(flag) {

console.log("底部菜单按钮点击序列 = " + flag);

}

}

}

</script>

<style scoped lang="scss">

page {

padding-bottom: 70px;

}

</style>

```

 

 

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

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

相关文章

Linux 实用操作技巧一

文章目录 Linux 实用操作技巧前言查找当前目录下所有 .gz 结尾的文件查找当前目录超过30天没有修改过且文件大于10M的.gz文件。将software 目录下大于 100k 的文件移动至 /tmp下 时间戳快速转换动态查看日志&#xff0c;并且停止获取内存、CPU、磁盘、IO等信息获取 公网 ip总结…

关于 SpringBoot 日志文件的知识

目录 日志有什么用&#xff1f; 日志怎么用&#xff1f; 自定义日志打印 在程序中得到日志对象 使用日志对象打印日志 日志格式 日志级别的分类与使用 日志级别设置 日志持久化 日志有什么用&#xff1f; 日志对于我们来说&#xff0c;最主要的用途就是排除和定位问题…

Java设计模式之行为型-模板方法模式

目录 一、概念 二、角色设计 三、代码实现 四、总结 一、概念 定义一个操作中的算法骨架&#xff0c;而将算法的一些步骤延迟到子类当中&#xff0c;使得子类可以不改变该算法结构的情况下重定义该算法的特定步骤&#xff0c;即在一个抽象类中公开定义了执行某一方法的模板…

一种新颖的智能优化算法—飞蛾扑火优化(MFO)算法

飞蛾扑火优化(Moth-Flame Optimization,MFO)算法是Mirjalili于2015年提出的一种新型智能优化算法&#xff0c;其灵感来源于一种特殊的导航机制—横向定位导航,实现了勘探与开发的较好平衡以获得全局优化性能。MFO算法具有并行优化能力强&#xff0c;全局性优且不易落入局部极值…

VS安装中报“应用程序无法启动,因为应用程序的并行配置不正确”的解决办法

1.问题描述 安装应用程序的时候&#xff0c;提示“应用程序无法启动&#xff0c;因为应用程序的并行配置不正确”。 2.解决过程 方法一 开启服务 开始→ 运行&#xff08;输入services.msc或者服务&#xff09;→确定后打开服务&#xff1b;找到Windows Modules Installer服务…

Advanced Installer使用指南

PC打包软件有很多 我只推荐一个advanced Installer完全傻瓜式操作&#xff0c;直接点就行了。innoSetUp需要学习它的脚本语言&#xff0c;学习成本太高了&#xff0c;而且网上的学习资料也很少。其它东西 增加依赖 我的程序需要dotNet5.0.13的运行时环境。 但是在AI上面没有…

chatgpt赋能python:Python撤销和回退的完全指南:从基础到高级

Python撤销和回退的完全指南&#xff1a;从基础到高级 Python是一种强大的编程语言&#xff0c;但即使在最好的情况下&#xff0c;错误也会出现。在此时&#xff0c;撤销错误和回退操作会变得非常重要。本指南将介绍Python中的撤销和回退操作&#xff0c;从基础操作到高级操作…

SparkSQL之AstBuilder

Spark SQL是基于ANTLR实现的&#xff0c;前文中有关于ANTLR的介绍文章《ANTLR实战》和《设计模式之访问者模式》&#xff0c;这篇文章主要介绍的内容是AstBuilder类。 Catalyst中提供了直接面向用户的ParseInterface接口&#xff0c;该接口中包含了对SQL语句、Expression表达式…

DDD(领域驱动设计) 核心概念浅析

文章目录 DDD(领域驱动设计) 核心概念浅析前言贫血模型什么是贫血模型贫血模型的优点贫血模型的缺点 充血模型充血模型的优点充血模型的缺点 DP 概念抽象接口简单概念简单概念流程&#xff1a;实现 统一语言和模型价值DP 和 Entity 的区别 Aggregate&#xff08;聚合&#xff0…

HackTheBox - 学院【CPTS】复习1 - PASSWORD ATTACKS

前言 有一个月时间没发文章了&#xff0c;我在6月11号进入htb学院学习CPTS&#xff0c;在扎实的THM基础的加持下&#xff0c;我学的非常顺利&#xff0c;其实大部分内容都相当于复习&#xff0c;而学到的内容只是一些可能不太常见、又或者非常细节的小技巧&#xff0c;这也是非…

vscode 出现 No such file or directory 的解决办法(python tkinter)

问题 Traceback (most recent call last): File “e:\Github\Python-GUI\PyQt-Fluent-Widgets\examples\navigation\demo.py”, line 202, in w Window() File “e:\Github\Python-GUI\PyQt-Fluent-Widgets\examples\navigation\demo.py”, line 95, in init self.initWindo…

ThreadPoolExecutor源码剖析

ThreadPoolExecutor源码涉及到的内容比较多&#xff0c;需要一点点的去啃和查看… ThreadPoolExecutor的核心属性 ThreadPoolExecutor的核心属性主要就是CTL。基于CTL获取到线程池的状态以及工作线程个数。 ctl是一个int类型的整数&#xff0c;內部基于AtomicInteger&#xff0…

再谈StringBuilder为什么线程不安全以及带来的问题

1 缘起 比较有意思的是&#xff0c;学习锁消除的过程中&#xff0c;有人讲到StringBuffer在方法内构建&#xff0c;不会被其他方法引用时&#xff0c;StringBuffer的锁会被消除&#xff0c; 于是&#xff0c;顺便看了一下同源的StringBuidler为什么线程不安全&#xff0c;以及…

【无标题】TP-LINK XDR5470 WiFi6路由器 简单开箱评测

TL-XDR5470易展版AX5400双频WiFi6路由器 简单开箱测评&#xff0c;上次买的XDR6078覆盖不够&#xff0c;还是得每层再买一个&#xff0c;所以又买了个TL-XDR5470&#xff0c;支持易展mesh。 上次买的XDR6078没有外置FEM功放芯片&#xff0c;所以信号差了一点&#xff0c;得加2…

PE系统盘制作

目录 前言 制作PE盘的步骤如下 前言 PE盘是一个轻量级的系统&#xff0c;类似于Windows系统。当您的计算机无法进入Windows系统时&#xff0c;您可以通过启动PE盘来访问一个独立的操作系统&#xff0c;从而执行各种任务&#xff0c;例如拷贝重要文件或进行系统安装。PE盘通常…

win10查看端口是否被占用,被哪一个程序占用(图文)

window系统中有时候我们会出现需要的端口号被占用&#xff0c;但不知道具体是哪个程序占用的。这时我们需要找到使用此端口的程序。 方法如下&#xff1a; 1&#xff09;以管理员身份打开命令提示符窗口&#xff08;开始-运行&#xff09;。 2&#xff09;使用命令查看端口使…

R730直通Tesla P40显卡

本次讲述如何在R730的ESXi上&#xff0c;将Tesla P40直通到centos7.7和WinServer2016。使用直通模式&#xff0c;安装普通的驱动即可&#xff0c;不需要vGPU的驱动。 按计划本来后面要自己装一下系统、做RAID的&#xff0c;不过最近需要用到显卡&#xff0c;所以先把显卡安装上…

初探Flink的Java实现流处理和批处理

端午假期&#xff0c;夏日炎炎&#xff0c;温度连续40度以上&#xff0c;在家学习Flink相关知识&#xff0c;记录下来&#xff0c;方便备查。 开发工具&#xff1a;IntelliJ Idea Flink版本&#xff1a;1.13.0 本次主要用Flink实现批处理&#xff08;DataSet API&#xff09; 和…

SAM与Prompt的结合

1. SAM介绍 由Meta AI Research开发的Segment anything model&#xff08;简称SAM&#xff09;最近引起了广泛的关注。SAM在超过10亿个mask的大型分割数据集上进行了训练&#xff0c;能够在特定的图像上分割任何对象。在最初的SAM工作中&#xff0c;作者们使用了零样本迁移任务…

08- c语言字符串 (C语言)

一 字符串的定义及基本使用 1、什么是字符串 被双引号引用的字符集合&#xff01;例如&#xff1a;”hello” 、”world”&#xff0c;或者是以 \0 结尾的字符数组&#xff01;&#xff01;&#xff01; 比如&#xff1a;char ch[] {h, e, \0} 注意&#xff1a;”hello” 中…