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

于 2024-03-14 16:51:20 发布
阅读量237 收藏
点赞数 3
文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63553261/article/details/136708469
版权

1.它默认高度为150px

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

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

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

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

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

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

不会八股文
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【uni-app】swiper组件高度自适应
可耐特
03-20 253
【代码】【uni-app】swiper组件高度自适应。
uni-app swiper内容高度自适应问题解决
zhangxy的博客
10-27 5609
轮播图内容非图片而是文本内容时，高度无法自适应问题处理 在切换轮播时调用该方法，给swiper标签赋高 getSwiperHeight() { let query = uni.createSelectorQuery().in(this); query.select(element).boundingClientRect(); query.exec((res) => { if (res) { this.swiperHeight = res[0].height; // swipe
uniapp swiper 图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件
04-15
uniapp swiper 图片高度根据图片宽度自适应； 通过选项卡跳到锚点位置，类似h5单页面通过a链接导航效果； 滑动到某个要素位置时触发事件，如tab选项卡值更改等
swiper组件添加左右箭头
03-29
前言：小程序官方swiper组件并未提供带左右箭头功能，但有些时候还是想把左右箭头添加上，今天连胜老师就给大家分享一下自己的实现方式。 思路很简单：在swiper组件内部添加两个image组件，绑定点击事件，动态改变swiper中的current值。不废话，主要看代码： WXML: (此图片来源于网络，如有侵权，请联系删除! ) WXSS:   swiper{   position:relative;   height:300rpx;   }   swiperimage{   display:block;   width:100%;   height:300rpx;   cursor:poin
关于在uni-app中使用swiper（APP实测可用）
热门推荐
weixin_46021159的博客
10-22 1万+
关于在uni-app中使用swiper ，详细讲解。
uni-app开发教程之swiper组件使用教程
码奴一只猿
05-26 1万+
Uniapp是一款跨平台的开发框架，可以用于开发微信小程序、H5、App等多种应用。其中，swiper组件是一种非常常用的组件，可以实现轮播图、图片滑动等效果。本文将详细介绍如何在Uniapp中使用swiper组件。
uni-app 中 swiper 轮播图高度自适应
UserGuan的博客
09-04 6137
2、swiper 标签存在默认高度是 height: 150px；高度无法实现由内容撑开，在默认情况下，图片的高度显示总是 150px。1、在每次滑动切换的时候，动态地获取 swiper-item 内部的 DOM 的元素的高度。1、首先 swiper 标签的宽度是 width: 100%2、将获取的高度动态设置给 swiper 元素。
微信小程序之swiper轮播图中的图片自适应高度的方法
08-27
主要介绍了微信小程序之swiper轮播图中的图片自适应高度的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使元素占满整个屏幕高度,修改swiper 圆点样式
03-29
一：微信小程序中使元素占满整个屏幕高度 在项目中经常要用到一个容器元素占满屏幕高度和宽度，然后再在这个容器元素里放置其他元素。 宽度很简单就是width:100% 但是高度呢，我们知道的是height:100%必须是在父元素...
微信小程序 扩展组件 tabs 中的 swiper 部分高度自适应
03-29
由于官方给了 swiper 固定高度150，且 swiper-item 都是 absolute 定位，所以实际应用中经常会碰到问题，在此记录一下修改方式。 一、正常 npm 下载 tabs 包，并用开发者工具构建 npm 二、修改构建出的目录 ...
uniapp中解决swiper高度自适应内容高度
等归,的博客
12-01 2596
uniapp中解决swiper高度自适应问题
uniapp
我们仍未知道那天所见花的名字,但是她的香味却留在我心间
07-05 8375
uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uniapp已经支持一套代码打包到 Android、IOS、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序、快应用、360小程序 10个平台。开发者/案例数量众多平台能力不受限生态丰富开发成本低学习成本低性能体验优秀随着手机性能的提高，WebView渲染方式的性能差距越来越低，2000元左右
uniapp 微信小程序动态设置图片高度
LEON_RAY
05-30 314
【代码】uniapp 微信小程序动态设置图片高度。
uniapp uview 轮播图动态高度(sb客户的需求)
weixin_47517731的博客
04-24 761
【代码】uniapp uview 轮播图动态高度(sb客户的需求)
uniapp swiper的高度自适应
最新发布
潇潇来吃瓜的博客
12-28 591
uniapp中的swiper组件可以用来做滑动切屏，由于必须设置一个固定高度，然而在每一个swiper-item里的内容高度不一样，就会造成内部的内容不能自动撑开。
uniapp中如何设置swiper的高度自适应的问题
Tianxiaoxixi的博客
06-06 6139
uniapp中如何设置swiper的高度自适应的问题
swiper自适应内容高度
06-08
使用Swiper实现自适应内容高度的方法是，通过计算Swiper内部每个slide的高度，然后设置Swiper容器的高度为最高slide的高度。具体实现步骤如下： 1. 在Swiper初始化的时候，监听Swiper的init事件，获取Swiper容器和所有的slide元素。 ```javascript var mySwiper = new Swiper('.swiper-container', { on: { init: function () { var swiperWrapper = this.$el.find('.swiper-wrapper'); var swiperSlides = this.$el.find('.swiper-slide'); // ... } } }); ``` 2. 遍历所有的slide元素，计算出最高的slide高度。 ```javascript var maxHeight = 0; swiperSlides.each(function () { var slideHeight = $(this).height(); if (slideHeight > maxHeight) { maxHeight = slideHeight; } }); ``` 3. 设置Swiper容器的高度为最高slide的高度。 ```javascript swiperWrapper.height(maxHeight); ``` 完整的实现代码如下： ```javascript var mySwiper = new Swiper('.swiper-container', { on: { init: function () { var swiperWrapper = this.$el.find('.swiper-wrapper'); var swiperSlides = this.$el.find('.swiper-slide'); var maxHeight = 0; swiperSlides.each(function () { var slideHeight = $(this).height(); if (slideHeight > maxHeight) { maxHeight = slideHeight; } }); swiperWrapper.height(maxHeight); } } }); ``` 需要注意的是，如果Swiper容器内部的内容是异步加载的，需要在内容加载完成后再执行上述代码，否则可能会导致高度计算不准确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值