用swiper 实现tabs切换并且实现他tabs底下内容自适应

2023-12-24 17:18

本文主要是介绍用swiper 实现tabs切换并且实现他tabs底下内容自适应,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

用swiper 实现tabs切换并且实现他tabs底下内容自适应

在swiper 插件中,‘.swiper-container’,’.swiper-wrapper’,’swiper-slide’ 的高度会根据内容的最高高度进行设置,使得tabs的高度不能根据自己的高度而自适应。
我的解决方式:
在‘swiper-slide’里面
1.添加一个div.content_div,
2.将 .swiper-slide 里面的padding和margin 都设置为0,在.content_div里面设置相应的margin和padding
3.把当前的div.content_div的高度赋值给‘.swiper-slide’,‘.swiper-container’,’.swiper-wrapper’

html:如下所示

<div class="maple-tab clearFix"><ul><li class="active"><p class="m-border-right">订单状态</p></li><li><p>订单详情</p></li></ul>
</div>
<!--列表内容-->
<div class="swiper-container" style=""><div class="swiper-wrapper" style=""><div class="swiper-slide tab-content-1"><div class="content_div"><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p><p>erwrew</p></div></div><div class="swiper-slide tab-content-2"><div class="content_div"><p>列表2内容</p><p>dfjkh 好的仓库供货电饭锅尽快发货的金凤凰开关灵活的风格和人工等方面,vhnjyhrgu</p><img src="dist/images/timg.jpg" class="images" alt=""></div></div></div>
</div>

js 如下所示:

<script src="dist/js/jquery.js"></script>
<script src="dist/js/swiper.min.js"></script>
<script>$(function () {var mySwiper = new Swiper('.swiper-container', {onSlideChangeEnd: function (swiper) {var j = mySwiper.activeIndex;$('.maple-tab li').removeClass('active').eq(j).addClass('active');var content_height = $(".content_div").eq(j).height();var slide_height = $(".swiper-slide").eq(j).height(content_height);$(".swiper-wrapper").css("height", content_height);$(".swiper-container").css("height", content_height);}})/*列表切换*/$('.maple-tab li').on('click', function (e) {e.preventDefault();//得到当前索引var i = $(this).index();$('.maple-tab li').removeClass('active').eq(i).addClass('active');var content_height = $(".content_div").eq(i).height();var slide_height = $(".swiper-slide").eq(i).height(content_height);$(".swiper-wrapper").css("height", content_height);$(".swiper-container").css("height", content_height);mySwiper.slideTo(i, 1000, false);});});
</script>

这篇关于用swiper 实现tabs切换并且实现他tabs底下内容自适应的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils

使用Python实现base64字符串与图片互转的详细步骤

《使用Python实现base64字符串与图片互转的详细步骤》要将一个Base64编码的字符串转换为图片文件并保存下来,可以使用Python的base64模块来实现,这一过程包括解码Base64字符串... 目录1. 图片编码为 Base64 字符串2. Base64 字符串解码为图片文件3. 示例使用注意

使用Python实现获取屏幕像素颜色值

《使用Python实现获取屏幕像素颜色值》这篇文章主要为大家详细介绍了如何使用Python实现获取屏幕像素颜色值,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、一个小工具,按住F10键,颜色值会跟着显示。完整代码import tkinter as tkimport pyau

在Java中将XLS转换为XLSX的实现方案

《在Java中将XLS转换为XLSX的实现方案》在本文中,我们将探讨传统ExcelXLS格式与现代XLSX格式的结构差异,并为Java开发者提供转换方案,通过了解底层原理、性能优势及实用工具,您将掌握... 目录为什么升级XLS到XLSX值得投入?实际转换过程解析推荐技术方案对比Apache POI实现编程

IDEA如何实现远程断点调试jar包

《IDEA如何实现远程断点调试jar包》:本文主要介绍IDEA如何实现远程断点调试jar包的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录问题步骤总结问题以jar包的形式运行Spring Boot项目时报错,但是在IDEA开发环境javascript下编译

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》:本文主要介绍在Python中获取命令行(cmd)环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中,总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061

Python中bisect_left 函数实现高效插入与有序列表管理

《Python中bisect_left函数实现高效插入与有序列表管理》Python的bisect_left函数通过二分查找高效定位有序列表插入位置,与bisect_right的区别在于处理重复元素时... 目录一、bisect_left 基本介绍1.1 函数定义1.2 核心功能二、bisect_left 与

VSCode设置python SDK路径的实现步骤

《VSCode设置pythonSDK路径的实现步骤》本文主要介绍了VSCode设置pythonSDK路径的实现步骤,包括命令面板切换、settings.json配置、环境变量及虚拟环境处理,具有一定... 目录一、通过命令面板快速切换(推荐方法)二、通过 settings.json 配置(项目级/全局)三、

pandas实现数据concat拼接的示例代码

《pandas实现数据concat拼接的示例代码》pandas.concat用于合并DataFrame或Series,本文主要介绍了pandas实现数据concat拼接的示例代码,具有一定的参考价值,... 目录语法示例:使用pandas.concat合并数据默认的concat:参数axis=0,join=