Uniapp中的轮播组件如何动态根据当前内容的高度去修改swiper高度？

最新推荐文章于 2025-01-16 20:45:48 发布
最新推荐文章于 2025-01-16 20:45:48 发布
阅读量564 收藏 1
点赞数 3
文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_63553261/article/details/136708469
版权
文章介绍了如何在遇到轮播图内容高度不确定的问题时，通过计算每个列表的固定高度并考虑margin，根据当前显示的列表数量动态设置Swiper的高度。作者强调在@animationfinish事件后更新height值以实现适应性设计。

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

1.它默认高度为150px

2.网上找了很多，试了很多，没有很好的解决方案。

3.我的思路是，假如是说每个轮播的内容是列表类型例如：

那么每个列表的高度是可以确定下来的。

例如它的高度为100px,假如说你当前展示的内容是18个这种的列表，那么就需要18/3=6个这种的高度，再加上它们上下之间margin的距离就是你要设置swiper的总高度。

只需要在触发@animationfinish之后，判断当前选项卡有多少列表，然后计算高度即可，然后给本地定义的的height在每次animationfinish完以后重新附上新的值即可。

此处只介绍解决思路，具体根据自己公司的需求去做！！！！

Uniapp：swiper(滑块视图容器)
MMF博客园
04-22 614
Uniapp：swiper(滑块视图容器)
uniapp中使用swiper实现详情页面轮播图动态高度，实现仿某红薯图片展示轮播图效果。
我很牛的
10-27 740
uniapp中swiper动态高度，实现仿某红薯轮播图效果。解决轮播图swiper高度不能随图片动态变化的问题，使其图片显示效果更佳。
【uniapp小程序】使用swiper时，swiper-item高度不一致时，动态设置swiper的高度
一个前端开发者
08-08 804
当swiper切换执行change事件时获取当前swiper-item的内容高度来改变swiper高度。
uni-app 中 swiper 轮播图高度自适应
热门推荐
UserGuan的博客
09-04 1万+
2、swiper 标签存在默认高度是 height: 150px；高度无法实现由内容撑开，在默认情况下，图片的高度显示总是 150px。1、在每次滑动切换的时候，动态地获取 swiper-item 内部的 DOM 的元素的高度。1、首先 swiper 标签的宽度是 width: 100%2、将获取的高度动态设置给 swiper 元素。
uniapp中解决swiper高度自适应内容高度
等归,的博客
12-01 7541
uniapp中解决swiper高度自适应问题
uni-app 动态设置 swiper 的高度
username_xu的博客
10-13 4129
开发中遇到两种需要动态设置swiper高度的情况： 第一种，需要除开顶部或底部元素获取屏幕剩余高度。第二种，需要根据子元素来计算 swiper 的高度。
关于uniapp中swiper组件的固定高度如何根据盒子内容进行改变
2301_76633800的博客
11-07 571
在写项目的时候，发现在swiper页面中加入写好的组件后，可能只显示轮播图，也就是大概150px的高度，这是因为swiper默认高度为150px，我上网查询几种方法，发现最好的还根据盒子高度动态绑定高度这一种兼容性最好。会在页面加载完成后被调用，确保所有的 DOM 元素都已渲染，可以进行相关的 DOM 操作。api获取到dom的属性值，注意细节就是在页面渲染以后在进行拉取，否则可能为空。这个函数是 UniApp 的生命周期函数之一。其次，查询uniapp官网，使用。如果有跟好的想法，欢迎指导。
uniapp动态获取swiper的高或宽，自学必看
2301_78398209的博客
03-30 1080
在页面挂载后设置swiper高度},//设置高度//页面可见区域高度console.log("页面可见区域 "+windowHeight);//获取节点代码//获取节点//判断是否未trueif (res) {//当前元素高度console.log("元素高度 = "+rect.height);//页面高度+循环体高度等于总高度console.log("总高度为 = "+this.height)}).exec();},//俩套代码//页面可视区域高度。
uniapp swiper 图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件
04-15
uniapp swiper 图片高度根据图片宽度自适应； 通过选项卡跳到锚点位置，类似h5单页面通过a链接导航效果； 滑动到某个要素位置时触发事件，如tab选项卡值更改等
uniapp使用轮播组件swiper，添加左右滑动按钮
S筱潇S四维Smile
01-30 2764
uniapp使用轮播组件swiper，添加左右滑动按钮
Uniapp swiper 滚动图组件
09-10
2. **Swiper组件**：Swiper是移动设备上常见的滑动轮播组件，通常用于图片展示、广告轮播等场景。在Uniapp中，Swiper组件支持自动播放、手动滑动、无限循环、分页指示器等多种特性，可以根据实际需求进行配置。 3. ...
uniapp实现顶部选项卡动态高度
03-05
微信小诚寻、uinapp
uniapp 自适应高度swiper
最新发布
m0_65747046的博客
01-16 503
组件实现了类似淘宝首页金刚区的分页轮播效果，支持动态高度调整，并兼容 UniApp（Web、iOS 和 Android 平台）。
UNIAPP实战项目笔记11 动态设置swiper内容的高度
Ggome的博客
09-28 604
onReady 是在初步完成渲染后才会执行,只有渲染完成后才能获取组件高度。通过获取生成的内容高度,自动设置swiper高度。
uniapp中如何设置swiper的高度自适应的问题
Tianxiaoxixi的博客
06-06 6609
uniapp中如何设置swiper的高度自适应的问题
实现uniapp+Vue3中swiper组件的自动高度功能
hjd2018的博客
04-02 2117
本文将介绍如何使用Vue3的组合式API（Composition API）来实现swiper组件的自动高度功能。
uni-app 动态设置 swiper 的高度 自定义Tab
weixin_72271537的博客
05-14 939
【代码】uni-app 动态设置 swiper 的高度 tab栏切换，左右滑动。
uniapp swiper Tab选项卡切换高度自适应问题
weixin_41224335的博客
10-24 3575
uniapp swiper Tab选项卡切换高度自适应问题 uniapp swiper Tab选项卡切换高度自适应问题 swiper需要指定固定高度，但数据是动态加载的，所以高度需要自适应。 基本思路：就是获取展示内容的高度 赋值给swiper。但是中间有好多坑，淌过了在这里分享一下思路，经验不足，有改进的地方欢迎多多指点 <wuc-tab :tab-list="tabList3" :tab...
uniapp轮播图swiper高度自适应
m0_75026336的博客
03-09 1591
（忽略取消cancelable=false的touchmove事件的尝试，例如，因为滚动正在进行，无法中断。swiper默认是有高度的，不会根据内容高度而发生响应式高度变化。用于取消手指触摸移动冒泡。
uniapp swiper文字自动轮播的时候内容高度自适应
10-09
可以使用 `scroll-view` 组件实现文字自动轮播，并设置 `scroll-y` 属性为 `true`，使其在垂直方向上可以滚动。同时，需要监听 `scroll-view` 的 `scrolltolower` 事件，当滚动到底部时，将文字列表的第一条数据添加到末尾，再移除第一条数据，实现循环滚动。在实现高度自适应时，可以使用 `scroll-view` 的 `bindscrolltolower` 属性配合 `dom` 方法计算内容高度，并动态设置 `scroll-view` 的高度。 示例代码如下： ```html <template> <view class="container"> <scroll-view class="swiper-list" scroll-y bindscrolltolower="onScrollToLower" style="height: {{listHeight}}px;"> <view wx:for="{{textList}}" wx:key="index">{{item}}</view> </scroll-view> </view> </template> <script> export default { data() { return { textList: ['这是第一段文字', '这是第二段文字', '这是第三段文字'], // 文字列表 listHeight: 0 // scroll-view 的高度 } }, mounted() { this.setListHeight() // 初始化设置 scroll-view 高度 }, methods: { // 计算 scroll-view 高度 setListHeight() { const query = uni.createSelectorQuery().in(this) query.select('.swiper-list').boundingClientRect(data => { this.listHeight = data.height }).exec() }, // 滚动到底部时，循环添加和移除文字 onScrollToLower() { const firstText = this.textList[0] this.textList.push(firstText) this.textList.splice(0, 1) } } } </script> <style> .container { width: 100%; height: 300rpx; } .swiper-list { width: 100%; overflow: hidden; } .swiper-list view { font-size: 28rpx; line-height: 40rpx; text-align: center; } </style> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值