uniapp折叠面板高度自适应(css修改)

最新推荐文章于 2025-05-14 11:28:02 发布

h_6543210

最新推荐文章于 2025-05-14 11:28:02 发布

阅读量1.8k

点赞数 4

CC 4.0 BY-SA版权

文章标签： uni-app css

本文链接：https://blog.youkuaiyun.com/m0_68428581/article/details/129706232

文章讲述了在官方方法无法满足需求时，如何通过修改CSS，特别是使用相邻兄弟选择器和`.is-open`类来设置uni-collapse组件在展开时的高度为auto，从而实现自适应高度的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.官方给uni-collapse组件的方法

2.官方方法在我这儿不是很适用，此处采用修改css的方式将折叠面板打开时的高度设为auto

找到对应位置，用相邻兄弟选择器（ ::v-deep 看情况是否需要加）

::v-deep .is-open + .uni-collapse-item__wrap {
	height:auto !important;
}

3.参考

相邻兄弟选择器https://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

h_6543210

关注关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【uniapp/uview1.x】u-collapse 高度随内容自适应

花间半盘棋

08-27

1478

当 u-collapse-items 中的内容为动态的时候，会发生这种情况：

uniapp 自适应高度swiper

m0_65747046的博客

01-16

530

组件实现了类似淘宝首页金刚区的分页轮播效果，支持动态高度调整，并兼容 UniApp（Web、iOS 和 Android 平台）。

5 条评论您还未登录，请先登录后发表或查看评论

uniapp-外部view根据图片高度自适应，解决uni-collapse 折叠面板，在折叠开的时候和图片未加载出来高度不准确的问题

m0_66939000的博客

04-26

767

获取当前图片内容最新的高度，解决组件中图片未加载出来高度不准确的问题。

UniApp 在华为三折叠屏中的适配问题与最佳解决方案（rpx 实战指南）

最新发布

deary

05-14

1493

随着折叠屏设备的普及，UniApp开发者在适配多形态设备时面临复杂问题，尤其是在三折叠屏设备上使用px单位导致页面显示异常。本文推荐使用rpx响应式单位替代px，以优化多设备适配体验。rpx能根据屏幕宽度自动缩放，确保布局、字体等样式在不同分辨率、屏幕尺寸和DPR的设备上自适应。通过对比使用px和rpx的样式代码，本文提供了详细的改造方案和常见UI元素的px到rpx换算参考。此外，还建议使用flex布局、动态获取设备信息等技巧，进一步提升适配效果。总结中强调，统一使用rpx、避免px是确保多端兼容性的关键。

uniapp 里折叠面板嵌套 uni-collapse 高度不能自适应解决办法

qq_38188762的博客

08-27

3034

如果是vue2.0 把proxy改为this即可。

uni-app u-collapse折叠版高度问题

zhangyao940330的博客

04-10

1313

1.给折叠版class,利用change事件监听折叠版展开。change事件监听所有class类，遍历并高度自适应。解决办法：监听每一次折叠版展开，并重新计算高度。问题：展开折叠版内容展示不全。

uniapp适配华为折叠屏

weixin_47094365的博客

10-27

2240

但是对我的不起作用，数据监听到了，跳转也跳了，但是屏幕并没有变化，然后我就改了一下，使用plus.runtime.restart()强制启动这个属性（只在安卓机起作用），然后缓存了一下当前页面的路径，目的是在某个页面折叠手机或者展开手机之后能回到原本的这个页面。公司近一年做的一款app是用uniapp开发的，最近要适配华为折叠屏，在网上找了许久，发现这方面的帖子比较少，只找到一种感觉能用的，是监听屏幕宽度的变化然后使用 uni.reLaunch 跳转空白页再跳回当前页。

uniapp swiper 图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件

04-15

uniapp swiper 图片高度根据图片宽度自适应；通过选项卡跳到锚点位置，类似h5单页面通过a链接导航效果；滑动到某个要素位置时触发事件，如tab选项卡值更改等

记录uniapp组件swiper自适应高度

qq_37194189的博客

01-01

850

console.log('当前滑块索引：', currentIndex);// 在这里你可以根据当前滑块的索引执行相应的逻辑。// 强制刷新界面（如果需要）在获取图片方法里加上 getswiperImageInfo方法。在uniapp组件swiper不能自适应高度。根据屏幕尺寸，进行换算对应的宽高比。根据传的图片，进行图片分析宽高，最后获得图片尺寸，进行赋值。

【uniapp】swiper组件高度自适应问题

qq_41595903的博客

04-22

8410

场景使用uniapp中的swiper组件进行轮播，发现swiper组件高度是在外层有个固定值，并没有去适配里面的雷蓉

uniapp+swiper高度自适应

02-26

Uniapp+Swiper的高度自适应可以通过以下几种方式实现： 1. 使用Swiper的autoHeight或heightAuto属性：Swiper提供了一些属性可以用来控制高度自适应，其中autoHeight和heightAuto是比较常用的。autoHeight会将滑动的...

uniapp使用uview组件的Collapse 折叠面板，动态渲染之后计算面板的高度

热门推荐

qq_39147047的博客

12-24

1万+

uniapp使用uview组件的Collapse 折叠面板，动态渲染之后计算面板的高度在uniapp里会有使用uview的Collapse折叠面板的情况，但在动态渲染数据之后，面板的内容会显示不全，这时候可以使用ref来重新获取高度； <u-collapse ref="collapseView"> <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index"> {{it

uniapp解决折叠屏手机适配问题

qq156831414的博客

10-18

4303

uniapp解决折叠屏手机适配问题；折叠屏手机翻开或关闭时，会造成页面的样式错乱，那么应该怎么解决呢，这里会有你想要的答案

【uniapp】自定义多级折叠面板

Qxn530的博客

09-29

9172

自定义侧边栏、折叠面板的基础实现

vue3 uview-plus Collapse 折叠面板高度自适应问题

qq_51946037的博客

03-26

1720

Collapse面板的数据是动态获取的，并且面板中的数据会有增删的操作，所以需要面板能自动适应内容的高度，避免出现高度不够内容显示不全，或多出一截空白的情。过ref获取面板，并调用uview提供的方法init()重新初始化内部高度计算。

uniapp 屏幕适配问题(折叠屏幕、手机、平板)

weixin_37792440的博客

09-28

3688

【代码】uniapp 屏幕适配问题。

uview折叠面板collapse-自适应高度

m0_58665272的博客

06-27

1655

uview折叠面板内容展示不全，计算高度并自适应高度

uni-collapse 高度变化用resize()方法无效的解决办法

Alisa_94的博客

09-27

2079

uni-app uni-collapse