当前位置: 首页 > news >正文

uni-app 中 swiper 轮播图高度自适应

方法一

1、首先 swiper 标签的宽度是 width: 100%

2、swiper 标签存在默认高度是 height: 150px ;高度无法实现由内容撑开,在默认情况下,图片的高度显示总是 150px

swiper 宽度 / swiper 高度 = 原图宽度 / 原图高度

swiper 高度 = swiper 宽度 * 原图高度 / 原图宽度

<swiper class="swiper-box" indicator-dots autoplay circular><swiper-item v-for="(item, i) in imgList" :key="i"><image style="width: 100%" :src="item" mode="widthFix" /></swiper-item>
</swiper>
.swiper-box {width: 100%;height: calc(100vw * 9 / 16);
}

方法二

1、在每次滑动切换的时候,动态地获取 swiper-item 内部的 DOM 的元素的高度

2、将获取的高度动态设置给 swiper 元素

<swiper:current="currIndex"@change="changeSwiper":style="{ height: swiperHeight + 'px' }"indicator-dotsautoplaycircular:duration="1000"
><swiper-item v-for="(item, i) in imgList" :key="i"><image :id="'wrap' + i" style="width: 100%" :src="item" mode="widthFix" /></swiper-item>
</swiper>
currIndex: 0, // 当前索引
swiperHeight: 0, // 滑块的高度(单位px)
onLoad(e) {this.$nextTick(() => {this.setSwiperHeight(); // 动态设置 swiper 的高度});
},
/* 切换 swiper 滑块 */
changeSwiper(e) {this.currIndex = e.detail.current;this.$nextTick(() => {this.setSwiperHeight(); // 动态设置 swiper 的高度});
},
/* 动态设置 swiper 的高度 */
setSwiperHeight() {const element = "#wrap" + this.currIndex;const query = uni.createSelectorQuery().in(this);query.select(element).boundingClientRect();query.exec(res => {if (res && res[0]) this.swiperHeight = res[0].height;});
},

相关文章:

uni-app 中 swiper 轮播图高度自适应

方法一 1、首先 swiper 标签的宽度是 width: 100% 2、swiper 标签存在默认高度是 height: 150px &#xff1b;高度无法实现由内容撑开&#xff0c;在默认情况下&#xff0c;图片的高度显示总是 150px swiper 宽度 / swiper 高度 原图宽度 / 原图高度 swiper 高度 swiper …...

开源风雷CFD软件多物理场耦合接口开发路线分享!!!

本文将基于开发过程中积累的经验&#xff0c;介绍风雷如何基于preCICE开发适配器。 preCICE是一个开源的多物理场数值模拟耦合库&#xff0c;可以用于多个求解器联合求解一个复杂的多场问题&#xff0c;支持在大规模并行系统上应用&#xff0c;具有良好的并行效率。并且可以对…...

浅谈Mysql读写分离的坑以及应对的方案 | 京东云技术团队

一、主从架构 为什么我们要进行读写分离&#xff1f;个人觉得还是业务发展到一定的规模&#xff0c;驱动技术架构的改革&#xff0c;读写分离可以减轻单台服务器的压力&#xff0c;将读请求和写请求分流到不同的服务器&#xff0c;分摊单台服务的负载&#xff0c;提高可用性&a…...

最近在对接电商供应链,说说开放平台API接口

B2B电商开放平台的设计需要从以下几面去思考&#xff1a; 开放平台API接口的设计&#xff0c;主要是从功能需求的角度&#xff0c;设计满足业务需求的接口及对应的字段&#xff1b; 平台与商家之间信息的对接&#xff0c;对接的方法有哪些&#xff1f;对接过程中需要可能会遇到…...

【FusionInsight 迁移】HBase从C50迁移到6.5.1(02)C50上准备FTP Server

【FusionInsight 迁移】HBase从C50迁移到6.5.1&#xff08;02&#xff09;C50上准备FTP Server HBase从C50迁移到6.5.1&#xff08;02&#xff09;C50上准备FTP Server登录老集群FusionInsight C50的Manager准备FTP User准备FTP Server HBase从C50迁移到6.5.1&#xff08;02&am…...

Java操作符学习笔记

1、布尔类型的逻辑操作符和按位操作符 & 和 &&、|| 和 | 其实是两种操作符。在使用逻辑判断时&#xff0c;有时不希望产生短路作用&#xff0c;会对两个布尔类型值使用单个的 & 或 |运算。这让我一直将单个 & 和 | 当成时逻辑操作符的一种&#xff0c;而事…...

【STM32】学习笔记-PWR(Power Control)电源控制

PWR&#xff08;Power Control&#xff09;电源控制 PWR&#xff08;Power Control&#xff09;电源控制是一种技术或设备&#xff0c;用于控制电源的开关和输出。它通常用于电源管理和节能&#xff0c;可以通过控制电源的工作状态来延长电子设备的使用寿命&#xff0c;减少能…...

安卓 MeasureCache优化了什么?

安卓绘制原理概览_油炸板蓝根的博客-CSDN博客 搜了一下&#xff0c;全网居然没有人提过 measureCache。 在前文中提到过&#xff0c;measure的时候&#xff0c;如果命中了 measureCache&#xff0c;会跳过 onMeasure&#xff0c;同时会设置 PFLAG3_MEASURE_NEEDED_BEFORE_LAYOU…...

docker save docker export 区别

docker save用于导出镜像到文件&#xff0c;包含镜像元数据和历史信息&#xff1b;docker export用于将当前容器状态导出至文件&#xff0c;类似快照&#xff0c;所以不包含元数据及历史信息&#xff0c;体积更小&#xff0c;此外从容器快照导入时也可以重新指定标签和元数据信…...

音频基础知识

文章目录 前言一、音频基本概念1、音频的基本概念①、声音的三要素②、音量与音调③、几个基本概念④、奈奎斯特采样定律 2、数字音频①、采样②、量化③、编码④、其他相关概念<1>、采样位数<2>、通道数<3>、音频帧<4>、比特率&#xff08;码率&#…...

TensorFlow(R与Python系列第四篇)

目录 一、TensorFlow介绍 二、张量 三、有用的TensorFlow运算符 四、reduce系列函数实现约减 1-第一种理解方式&#xff1a;引入轴概念后直观可理 2-第二种理解方式&#xff1a;按张量括号层次的方式 参考&#xff1a; 一、TensorFlow介绍 TensorFlow是一个强大的用于数…...

华为数通方向HCIP-DataCom H12-821题库(单选题:261-280)

第261题 以下关于IPv6过渡技术的描述,正确的是哪些项? A、转换技术的原理是将IPv6的头部改写成IPv4的头部,或者将IPv4的头部改写成IPv6的头部 B、使用隧道技术,能够将IPv4封装在IPv6隧道中实现互通,但是隧道的端点需要支持双栈技术 C、转换技术适用于纯IPv4网络与纯IPv…...

论文《基于概率标签估计的半监督日志缺陷检测》翻译

论文《Semi-supervised Log-based Anomaly Detection via Probabilistic Label Estimation》翻译 Semi-supervised Log-based Anomaly Detection via Probabilistic Label Estimation翻译...

ajax day2

1、 2、控制弹框显示和隐藏&#xff1a; 3、右键tr&#xff0c;编辑为html&#xff0c;可直接复制tr部分的代码 4、删除时&#xff0c;点击删除按钮&#xff0c;可以获取图书id&#xff1a; 5、编辑图书 快速赋值表单元素内容&#xff0c;用于回显&#xff1a; 6、hidden …...

互联网摸鱼日报(2023-09-04)

互联网摸鱼日报(2023-09-04) 36氪新闻 腾讯游戏的棋中妙手 逐一解读北交所8大改革组合拳 本周双碳大事&#xff1a;全国碳市场清缴履约工作全面展开&#xff1b;宁德时代在成都成立新能源研究院&#xff1b;我国首个万吨级光伏发电直接制绿氢项目投产 你在上海 city walk&a…...

UG\NX CAM二次开发 遍历组中的工序 UF_NCGROUP_ask_member_list

文章作者:代工 来源网站:NX CAM二次开发专栏 简介: UG\NX CAM二次开发 遍历组中的工序 UF_NCGROUP_ask_member_list 效果: 代码: void GetAllOperTag(tag_t groupTag, vector<tag_t> &vOperTags) {int count=0;tag_t * list;UF_NCGROUP_ask_member_li…...

适配器、装饰器模式

一、装饰器模式 向一个现有的对象增加其功能而不改变其结构&#xff0c;属于类的包装...

Netty服务端启动的整体流程-基于源码4.1.96Final分析

Netty采用的是主从Reactor多线程的模型&#xff0c;参考Scalable IO in Java&#xff0c;但netty的subReactor为一个组 一、从FileServer服务器示例入手 public final class FileServer {static final boolean SSL System.getProperty("ssl") ! null;// Use the …...

预训练Bert添加new token的问题

问题 最近遇到使用transformers的AutoTokenizer的时候&#xff0c;修改vocab.txt中的[unused1]依然无法识别相应的new token。 实例&#xff1a; 我将[unused1]修改为了[TRI]&#xff0c;句子中的[TRI]并没有被整体识别&#xff0c;而是识别为了[,T,RI,]。这明显是有问题的。…...

非常典型和高效的枚举类写法

目录 1、讲讲好处 2、例子 &#xff08;1&#xff09;枚举类&#xff1a; &#xff08;2&#xff09;DTO类&#xff1a; 3、根据上面例子进行具体讲解 1、讲讲好处 在使用这种标准枚举模式编写业务逻辑时,可以直接通过枚举成员来表示状态,不需要担心底层的 value 或描述信…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...