VUE3----Tabs swiper 滑动切换

Tabs swiper 滑动切换

<template>
	<view class="cc-tab-container">
		<scroll-view class="tab-head" :class="tabClassName" scroll-x="true" scroll-with-animation :scroll-left="state.scrollLeft">
			<view class="tab-head-item" :class="{ 'active': index === currentIndex  }" 
				v-for="(item, index) in tabs" :id="'tab_'+item.id" :key="index" @click="swichTab(index)">
				<view class="tab-text">{{item.name}}</view>
				<view class="tab-line-box">
					<view class="tab-line" :style="'width:' + lineWidth"></view>
				</view>
			</view>
		</scroll-view>
		<swiper class="tab-swiper" 
			:class="swiperClassName" 
			:disable-touch="disableTouch" 
			:current="currentIndex" 
			@change="changeSwiper">
			<solt></solt>
		</swiper>
	</view>
</template>

<script setup>
	import { reactive, computed } from 'vue'
	
	const props = defineProps({
		tabs: {
			type: Array,
			default: []
		},
		currentIndex : { // 从0 开始
			type: Number,
			default: 0
		},
		tabWidth: {
			type: Number,
			default: 60
		},
		lineWidth: {
			type: String,
			default: '50rpx'
		},
		tabClassName: {
			type: String,
			default: ''
		},
		// 是否滑动切换
		disableTouch: {
			type: Boolean,
			default: false
		},
		swiperClassName: {
			type: String,
			default: ''
		}
	})
	
	const state = reactive({
		scrollLeft: 0
	})
	
	const emits = defineEmits(['changeSwiper', 'swichTab'])
	
	const swichTab = (index) =>  {
		state.scrollLeft = 0
		
		for (let i = 0; i < index; i++) {
			state.scrollLeft += state.tabWidth
		};
		
		emits("swichTab", index)
	}
	
	const changeSwiper = (e) => {
		emits("changeSwiper", e.detail.current)
	}
</script>

<style lang="scss">
.cc-tab-container {
	.tab-head {
		display: flex;
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		background-color: $cc-color-white;
		text-align: center;
		border-bottom: 1px solid #ddd;
		
		&-item {
			display: inline-block;
			white-space: nowrap;
			height: 86rpx;
			position: relative;
			margin: 0 40rpx;
	
			.tab-text {
				font-size: 26rpx;
			}
	
			.tab-line-box {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: flex;
				justify-content: center;
	
				.tab-line {
					height: 4rpx;
					border-radius: 4rpx;
				}
			}
			
			&.active{
				.tab-text{
					color: $cc-color-primary;
				}
				.tab-line {
					background:  $cc-color-primary;
				}
			}
		}
	}
	
	.tab-swiper {
		flex: 1;
		margin-top: 20rpx;
	}
}
</style>

使用

 <cc-tab-swiper :tabs="state.tabs" :currentIndex="state.currentIndex" @swichTab="swichTab" @changeSwiper="changeSwiper">
		<swiper-item class="tab-content-item">
			<view class="swiper-item">选项卡a1</view>
		</swiper-item>
</cc-tab-swiper>

注意

目前小程序 swiper-item 不支持 solt,在页面中直接使用组件内容

效果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

变电站综合自动化系统:Modbus-PLC-645转IEC104网关方案

前言 电力行业作为关系国计民生的重要基础产业&#xff0c;是关系千家万户的公用事业。但是要做好电力行业安全保障工作的前提&#xff0c;是需要对应的技术人员详细了解电力工业使用的系统、设备以及各类协议的安全特性&#xff0c;本文将主要介绍IEC 104协议的定义和钡铼技术…

STL——stackqueue

stack stack即为栈&#xff0c;先进后出是其特点 栈只有栈顶元素能被外界使用&#xff0c;故不存在遍历行为 栈中常用接口 构造函数 stack<T> stk; //默认构造方式 stack(const stack &stk); //拷贝构造 赋值操作 stack& operator(const stack &stk); …

对汉诺塔递归算法的简单理解

一.历史背景:汉诺塔&#xff08;Tower of Hanoi&#xff09;&#xff0c;又称河内塔&#xff0c;是一个源于印度古老传说的益智玩具。大梵天创造世界的时候做了三根金刚石柱子&#xff0c;在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始…

网络安全是智能汽车下一个要卷的方向?

2024年一季度&#xff0c;中国汽车市场延续了2023年的风格&#xff0c;核心就是「卷」。 2023年&#xff0c;我国汽车市场爆发「最强价格战」&#xff0c;燃油车的市场空间不断被挤压&#xff0c;如今只剩下最后一口气。近日乘联会发布4月1-14日最新数据&#xff0c;新能源&am…

基于昇腾AI | 英码科技EA500I使用AscendCL实现垃圾分类和视频物体分类应用

现如今&#xff0c;人工智能迅猛发展&#xff0c;AI赋能产业发展的速度正在加快&#xff0c;“AI”的需求蜂拥而来&#xff0c;但AI应用快速落地的过程中仍存在很大的挑战&#xff1a;向下需要适配的硬件&#xff0c;向上需要完善的技术支持&#xff0c;两者缺一不可。 基于此&…

如何利用仪表构造InfiniBand流量在数据中心测试中的应用

一、什么是Infiniband&#xff1f; 在当今数据爆炸的时代&#xff0c;数据中心作为信息处理的中心枢纽&#xff0c;面临着前所未有的挑战。传统的通信方式已经难以满足日益增长的数据传输需求&#xff0c;而InfiniBand技术的出现&#xff0c;为数据中心带来了全新的通信解决方…

使用xshell工具连接ubuntu的root账户被拒绝的解决方法

问题描述&#xff1a; 我在使用xshell工具远程连接Ubuntu虚拟机的过程中&#xff0c;如果连接的是的普通用户则xshell工具可以正常连接&#xff0c;但是当我向连接ubuntu系统的root用户&#xff0c;即便是密码输入正确但还是不能连接成功。不能连接成功的截图如下&#xff1a; …

requests库进行接口请求

请求的常规写法 requests.post() 、requests.get() 从中可以看出&#xff1a; 必填参数&#xff1a; url可缺省参数&#xff1a; data&#xff0c;json等、关键字参数 **kwargs 如下进行了一个post请求的登录&#xff0c;且请求体在body中 知识点1 当为post请求时&#xff1…

建堆时间复杂度

片头 嗨&#xff01;小伙伴们&#xff0c;大家好&#xff01; 在上一篇中&#xff0c;我们学习了什么是堆&#xff0c;以及如何实现堆。这一篇中&#xff0c;我将继续带领大家来深入学习堆&#xff0c;准备好了吗&#xff1f;我要开始咯&#xff01; 首先&#xff0c;大家还记…

opencv_17_翻转与旋转

一、图像翻转 1&#xff09;void flip_test(Mat& image); 2&#xff09;void ColorInvert::flip_test(Mat& image) { Mat dst; //flip(image, dst, 0); //上下翻转 flip(image, dst, 1); //左右翻转 // flip(image, dst, -1); //180度翻转 imsho…

VScode 无法连接云服务器

试了很多方法&#xff0c;比如更换VScode版本&#xff0c;卸载重装&#xff0c;删除配置文件 重启电脑&#xff0c;都无法成功。最后重置电脑后才连接上&#xff0c;但是重启服务器后又出现该问题。 方法一&#xff1a;修改环境 方法二&#xff1a;把vscode卸载干净重下

【快速入门】数据库的增删改查与结构讲解

文章的操作都是基于小皮php study的MySQL5.7.26进行演示 what 数据库是能长期存储在计算机内&#xff0c;有组织的&#xff0c;可共享的大量数据的集合。数据库中的数据按照一定的数据模型存储&#xff0c;具有较小的冗余性&#xff0c;较高的独立性和易扩展性&#xff0c;并为…

LabVIEW智能变电站监控系统设计与实现

LabVIEW智能变电站监控系统设计与实现 随着电力系统和智能化技术的快速发展&#xff0c;建立一个高效、可靠的变电站监控系统显得尤为重要。通过分析变电站监控系统的需求&#xff0c;设计了一个基于LabVIEW软件的监控平台。该平台利用虚拟仪器技术、传感器技术和无线传输技术…

数据结构中的栈(C语言版)

一.栈的概念 栈是一种常见的数据结构&#xff0c;它遵循后进先出的原则。栈可以看作是一种容器&#xff0c;其中的元素按照一种特定的顺序进行插入和删除操作。 压栈&#xff1a;栈的插入操作叫做进栈/压栈/入栈&#xff0c;入数据在栈顶。 出栈&#xff1a;栈的删除操作叫做…

2024年的十大技术趋势 - AI 等等

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

网优小工具-基站ID行列转换

网优小工具&#xff0d;基站ID行列转换 因在日常工作需要对基站ID批量行转列&#xff0c;以方便在网管上批量筛选指定网元&#xff0c;该小工具基于微软Power Query插件编写&#xff0c;工具方便、简洁、易用&#xff0c;共享出来以方便工作。 工作界面 &#xff11;.粘贴需筛…

学习VUE2第6天

一.请求拦截器 可以节流&#xff0c;防止多次点击请求 toast是单例 二.前置路由守卫 在Vue.js中&#xff0c;前置路由守卫是指在路由转换实际发生之前执行的钩子函数。这是Vue Router&#xff08;Vue.js官方的路由管理器&#xff09;提供的一种功能&#xff0c;允许开发者在用…

中兴UME网管LTE共享参数配置-PLMN添加

本文为中兴设备UME网管电联中频共享参数配置&#xff0c;PLMN添加参数配置部分&#xff0c;因UME与U&#xff13;&#xff11;网管添加PLMN配置区别较大&#xff0c;UME网管需同时配置运营商EN&#xff0d;DC策略&#xff0c;相关配置流程及参数配置如下文。 PLMN eNodeB CU …

与 Apollo 共创生态:观看7周年大会的心路历程

前言 在科技飞速发展的今天&#xff0c;自动驾驶技术已然成为行业创新的热点之一。作为一名长期关注自动驾驶领域的技术人员&#xff0c;我有幸见证了Apollo平台的成长与壮大。七年前&#xff0c;Apollo的诞生为我们带来了无尽的想象与期待&#xff1b;七年后的今天&#xff0…

【自研网关系列】过滤器链 -- 灰度发布过滤器

&#x1f308;Yu-Gateway&#xff1a;&#xff1a;基于 Netty 构建的自研 API 网关&#xff0c;采用 Java 原生实现&#xff0c;整合 Nacos 作为注册配置中心。其设计目标是为微服务架构提供高性能、可扩展的统一入口和基础设施&#xff0c;承载请求路由、安全控制、流量治理等…