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模式里面有个明显的问题,就是你无法获取到事件源的参数。很多大聪明肯定会说,这还不简单,通过自己写控件,给控件加个自定义属性不就行了,想要啥事件就写啥事件进去,完全自主可控。但是对于写…

Matlab R2023b 中文版软件安装包下载地址及安装教程

MATLAB是一款商业数学软件&#xff0c;用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境&#xff0c;主要包括MATLAB和Simulink两大部分。可以进行矩阵运算、绘制函数和数据、实现算法、创建用户界面、连接其他编程语言的程序等&#xff0c;主要…

建设银行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种常用…

Python【匹配符号】

要求&#xff1a; 输入一行符号&#xff0c;以#结束&#xff0c;判断其中的对称符号是否匹配。对称符号包括&#xff1a; { } 、 [ ] 、 ( )、 < > 如果对称符号能够实现中间对称&#xff0c;则输出yes 否则输出no 代码如下&#xff1a; # 定义一个函数&…

记录一次爱快路由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;历任核心研发工程师…

组件库篇 | EUI | 弱提示框

组件库篇 | EUI | 弱提示框 弱提示框 Toast 创建弱提示框 Toast toast(1800, 30, 350, 50); // 创建一个宽350,高50的弱提示框,y坐标为30,位于宽1800的窗口内这样就创建了一个弱提示框,传入窗口宽度的目的是使其居中显示,因此无需指定x坐标。 注意: toast是一个弱提示…

7.二维数组——输出3*3的矩阵

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 前言 本系列为二维数组编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 输出3*3的矩阵 二、题目分析 for(i0;i<3;i){ for(j0;j<3;j){ ******&#xff1b; } } 三、解题 程序运行代码…

营销系统规则引擎

一、系统介绍 规则引擎是一个用于执行营销规则的模块&#xff0c;其包括营销规则配置、规则校验等功能。规则引擎可以根据预先设定的条件和逻辑&#xff0c;自动化地执行特点的营销策略&#xff0c;帮助企业更好地吸引客户&#xff0c;增加销售和提高客户满意度。 规则引擎功能…

Linux基本指令(后篇)

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

代码随想录 763. 划分字母区间

题目 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。 注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。 返回一个表示每个字符串片段的长度的列表。 示例 1…

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…

【开源视频联动物联网平台】libmodbus 写一个modbus tcp客户端

libmodbus 是一个用于 Modbus 通信协议的 C 语言库&#xff0c;可以用来创建 Modbus TCP 客户端。以下是一个简单的示例代码&#xff0c;演示如何使用 libmodbus 创建一个 Modbus TCP 客户端。 首先&#xff0c;确保你已经安装了 libmodbus 库。你可以从 libmodbus 的官方网站…

Mybatis-Plus实现分页查询

分页插件配置 MybatisPlusConfig import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.spri…

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

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

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

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