uniapp中解决swiper高度自适应内容高度

起因:uniapp中swiper组件swiper 标签存在默认高度是 height: 150px ;高度无法实现由内容撑开,在默认情况下,swiper盒子高度显示总是 150px

swiper组件swiper 标签存在默认高度是 height: 150px ;
在这里插入图片描述

解决办法思路: 动态设置swiper盒子的高度,故需要获取swiper-item盒子中内容的高度,然后动态的将此盒子的高度赋值给swiper盒子的高度

方法:

template中的内容:

<view class="tabBox"><view class="tabScroll"><scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll"><view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id":class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.cat_name}}</view></scroll-view></view><!-- 切换区域  :style="{ height: swiperHeight + 'px' }"  此是动态设置swiper的代码 --><swiper  :style="{ height: swiperHeight + 'px' }" :indicator-dots="false" :autoplay="false" class="swiper" :current="navIndex" ref="swiper" @change="tabChange"><block v-for="(item,index) in tabBars" :key="index"><swiper-item><scroll-view scroll-x="true" class="swiper-scroll" ><!-- <view class="swiper-item">{{itemA.name}}</view> --><view class="swiper-item swiperAAAAA" ><view class="boxTab" v-for="(itemA,indexA) in item.son_list" :key="indexA" @click="goToSort(itemA.cat_name, itemA.cat_fid, itemA.cat_id, 0)"><!-- 图片盒子 --><view class="tabImg"><image :src="itemA.image" alt=""></image></view><!-- 文字 --><view class="tabText">{{itemA.cat_name}}</view></view></view></scroll-view></swiper-item></block></swiper></view>

data中的数据:

<script>
export default{data(){return{navIndex: 0,// tab切换区域的高度swiperHeight:0,// tab切换数组tabBars:[{cat_name:'服装',id:1,son_list:[{image:'./static/search.png',cat_name:'内衣'},{image:'./static/search.png',cat_name:'内裤'},{image:'./static/search.png',cat_name:'袜子'},{image:'./static/search.png',cat_name:'大一'},{image:'./static/search.png',cat_name:'居家服'},{image:'./static/search.png',cat_name:'衬衫'},{image:'./static/search.png',cat_name:'外套'},{image:'./static/search.png',cat_name:'全部分类'},]},{cat_name:'饮食',id:2,son_list:[{image:'./static/search.png',cat_name:'内衣'},{image:'./static/search.png',cat_name:'内裤'},{image:'./static/search.png',cat_name:'袜子'},{image:'./static/search.png',cat_name:'大一'},]},{cat_name:'家电',id:3},{cat_name:'居家',id:4},{cat_name:'洗护',id:5},{cat_name:'婴童',id:6},{cat_name:'餐厨',id:7},{cat_name:'餐厨1',id:8},{cat_name:'餐厨2',id:9},{cat_name:'餐厨3',id:10},],}}
}
</script>
this.$nextTick(() => {// tab切换中swiper高度自适应内容高度uni.createSelectorQuery().select('此次为想获取的元素的id名(#xxx)或者类名(.xxx)').boundingClientRect(rect=>{console.log('打印该盒子的元素',rect.height);// console.log('打印swiperHeight的数值',this.swiperHeight);}).exec()});

以上代码则为获取元素内容高度的方法(直接拿下用即可)

最后结果:

此时swiper的高度已经被重新更改为102px (此数值为动态可变数值,取决于内容高度)
在这里插入图片描述
在这里插入图片描述

到此为止则swiper高度自适应问题就解决了





















     目标不是都能达到的,但它可以作为瞄准点。。

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

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

相关文章

WPF Mvvm模式下面如何将事件映射到ViewModel层

前言 平常用惯了Command绑定,都快忘记传统的基于事件编程模式了,但是Commond模式里面有个明显的问题,就是你无法获取到事件源的参数。很多大聪明肯定会说,这还不简单,通过自己写控件,给控件加个自定义属性不就行了,想要啥事件就写啥事件进去,完全自主可控。但是对于写…

建设银行RPA应用实践

当下&#xff0c;银行业正在从“互联网金融”时代向“新科技金融”时代迈进&#xff0c;在目前经济形势严峻、人力成本持续增加的经营背景下&#xff0c;以科技解放人力将是智能化银行发展的必然趋势。RPA技术为解决上述问题提供了崭新的路径。 RPA&#xff08;机器人流程自动…

ES-深入理解倒排索引

倒排索引 idproductdesc1新版 小米 至尊-纪念版手机1小米 NFC 手机3NFC手机4小米 耳机5华为 耳机6扫地机器人7华为 Mata………………term_indexterm dictionaryposting list------------------------------------小米1……100W华为6,7,9NFC76,90耳机5352红米643,98机器人645,9…

Python中进行特征重要性分析的8个常用方法

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在机器学习和数据科学领域&#xff0c;理解特征在模型中的重要性对于构建准确且可靠的预测模型至关重要。Python提供了多种强大的工具和技术&#xff0c;能够探索特征重要性的各个方面。 本文将详细介绍8种常用…

记录一次爱快路由ACL策略引起的大坑

环境&#xff1a; A公司和B公司采用爱快的ipsec互联 B公司同时有加密软件限制网络 问题&#xff1a;对方ERP无法连接我们的数据库服务器 先简单测试了下1433端口是不是通的 下面的测试结果&#xff0c;直接ping是通的&#xff0c;但是加上1433端口后就不通 排查过程&#xff1…

《功能磁共振多变量模式分析中空间分辨率对解码精度的影响》论文阅读

《The effect of spatial resolution on decoding accuracy in fMRI multivariate pattern analysis》 文章目录 一、简介论文的基本信息摘要 二、论文主要内容语音刺激的解码任务多变量模式分析&#xff08;MVPA&#xff09;K空间 空间分辨率和平滑对MVPA的影响平滑的具体过程…

PHP实践:用ThinkPHP6完整实现用户分页功能

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…

Linux基本指令(后篇)

目录 14.时间指令date 15.Cal指令 16.find指令(非常重要) 17.grep指令 18.打包压缩指令zip和tar以及解压指令unzip和tar 14.时间指令date date(显示当前时间) 1.在显示方面&#xff0c;使用者可以设定欲显示的格式&#xff0c;格式设定为一个加号后接数个标记&#xff0c;其中…

SSM项目实战-mapper实现

1、SysUserMapper.java package com.atguigu.schedule.mapper; import com.atguigu.schedule.pojo.SysUser; import org.springframework.stereotype.Repository; Repository public interface SysUserMapper {SysUser getSysUser(SysUser sysUser); }2、ScheduleMapper.java p…

拉新地推任务管理分销助手公众号开发

拉新地推任务管理分销助手公众号开发 拉新地推任务管理分销助手公众号开发功能可以帮助企业进行地推任务的管理和分销助手的开发。以下是一些可能的功能介绍&#xff1a; 任务管理&#xff1a;这个功能可以让企业创建、分配和管理地推任务。管理员可以创建地推任务&#xff0c…

Java流处理之序列化和打印流

文章目录 序列化概述ObjectOutputStream类构造方法序列化操作 ObjectInputStream类构造方法反序列化操作1**反序列化操作2** 案例&#xff1a;序列化集合案例分析案例实现 打印流概述PrintStream类构造方法改变打印流向 序列化 概述 Java 提供了一种对象序列化的机制。用一个…

【【FPGA 之 MicroBlaze定时器中断实验】】

FPGA 之 MicroBlaze定时器中断实验 AXI Timer 具有 AXI 总线接口&#xff0c;能够产生不同时间周期和占空比的时钟、脉冲产生电路、产生与时间有关的中断和用于电机控制的脉宽调制信号。 AXI Timer IP 核提供了一个 AXI4 Lite 接口用于与处理器通信&#xff1b;它内部有两个可…

引领数据趋势:2023年最值得关注的十大ETL数据集成工具

在这个数据至上的时代&#xff0c;对于以数据为驱动的组织来说&#xff0c;建立一个信息集中的强大源头是成功的关键。众多企业依靠ETL工具来管理和理解它们的数据。 ETL&#xff0c;即提取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;、加载&…

Jenkins持续集成之修改jenkins工作目录

修改jenkins工作目录 一般不建议把工作目录放到默认的C盘&#xff0c;故可以更改到其他盘中 前置条件&#xff1a;先在其他盘中新建工作目录的文件&#xff1b;如下图 1、首先打开任务管理器&#xff0c;找到服务中的Jenkins进程 2、右击点击转到详细信息&#xff1b; 3、再右…

四大视角看EMC设计:滤波、接地、屏蔽、PCB布局

电磁干扰的主要方式是传导干扰、辐射干扰、共阻抗耦合和感应耦合。对这几种途径产生的干扰我们应采用的相应对策&#xff1a;传导采取滤波&#xff0c;辐射干扰采用屏蔽和接地等措施&#xff0c;就能够大大提高产品的抵抗电磁干扰的能力&#xff0c;也可以有效的降低对外界的电…

EPICS motor模块中SoftMotor的使用示例

本实例使用motor模块中软电机&#xff0c;通过通道访问控制另一个直流电源IOC的输出电压&#xff0c;并且回读输出电压。 此处使用的另一个IOC为&#xff1a;基于EPICS stream模块的直流电源的IOC控制程序实例-CSDN博客 1&#xff09;创建这个IOC程序目录结构&#xff0c;操作…

pnpm 安装

npm install pnpm -g 解决方案&#xff1a; 1、使用管理员的身份打开powershell, win x 2、输入 set-executionpolicy remotesigned 后按y&#xff0c;问题得到解决 其他&#xff1a; pnpm 安装完成只有&#xff0c;可设置其镜像 1、查阅当前镜像&#xff08;源&#xff09…

Python常用库大全及简要说明,附官方网站链接地址

文章目录 前言环境管理包管理包仓库分发构建工具交互式解析器文件日期和时间文本处理特殊文本格式处理自然语言处理文档配置命令行工具下载器图像处理OCR音频Video地理位置HTTP数据库数据库驱动ORMWeb 框架权限CMS电子商务RESTful API验证模板引擎队列搜索动态消息资源管理缓存…

HarmonyOS ArkTS与c++交互通信

一、创建Native C Module 1、右键项目->new->module 如图&#xff1a; 2、修改build-profile.json5配置 "externalNativeOptions": {"path": "./src/main/cpp/CMakeLists.txt","arguments": "-v -DOHOS_STLc_shared&quo…

Android Bitmap 使用Vukan、RenderEffect、GLSL实现模糊

文章目录 Android Bitmap 使用Vukan、RenderEffect、GLSL实现模糊使用 RenderEffect 模糊使用 Vukan 模糊使用 GLSL 模糊RS、Vukan、RenderEffect、GLSL 效率对比 Android Bitmap 使用Vukan、RenderEffect、GLSL实现模糊 本文首发地址 https://blog.csdn.net/CSqingchen/articl…