完美解决！uniapp写小程序用swiper轮播高度问题

最新推荐文章于 2024-05-30 11:11:54 发布
最新推荐文章于 2024-05-30 11:11:54 发布
阅读量1.4k 收藏 6
点赞数 2
分类专栏： 博客 文章标签： 小程序 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zqqfives/article/details/120990817
版权

完美解决！uniapp写小程序用swiper轮播高度问题

我这两天在用uniapp写小程序，因为需求要横向是滚动的，所以我用了swiper轮播来实现滚动

但是我发现这个轮播的高度是定死的，如果你下面有列表那么就会超出隐藏，经过了一天的折磨之后

终于想到了解决办法！

我看网上都是什么动态获取他的高度啊之类的，我觉得太麻烦所以就这样做了

  1. 我先是发现他的所有swiper-item里面都有一个overflow: hidden;(超出隐藏)然后我给他用overflow: auto;给顶掉了
  2. 然后我发现虽然说高度没变，但是里面的内容已经可以向下滚动了，拿这不就简单多了，我直接给外面盒子的150px的默认高度给改成100vh了，完美解决！
zqq-nuli
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【uniapp】swiper组件高度自适应问题
qq_41595903的博客
04-22 7701
场景 使用uniapp中的swiper组件进行轮播，发现swiper组件高度是在外层有个固定值，并没有去适配里面的雷蓉
uniapp怎么准确的获取swiper高度
weixin_56704277的博客
06-23 1316
1.uniapp里面的swiper具有默认高度问题，默认高度为150px。导致在index里面的组件显示不完全。 解决办法： 1.简单的解决方法是给swiper设置高度。但这种方法不太准确。 2.可以用view把需要获取的组件抱起来，然后通过uniapp的api里面节点信息，用uni.createSelectorQuery().select（节点class名称）方法获取节点。 然后通过获取到的节点使用boundingClientRect获取节点的信息。 view.boundingClientR
uni-app 微信小程序之swiper轮播图
最新发布
aaa123aaasqw的博客
05-30 301
【代码】uni-app 微信小程序之swiper轮播图。
uniapp在不同情景下，swiper的默认高度如何修改
qq_45432996的博客
05-04 1381
套一个scroll-view，只要得到可是区域的高，在安卓机没问题，在苹果手机获取的高度值不对 ，最好不用 加一个父元素，例如view，然后获取每一个子元素的高度加起来的和的高度值，就是这个父元素高度的值 ...
swiper图片集高度不一致
hyt48079287的专栏
02-17 292
swiper图片集高度不一致
【uniapp小程序】使用swiper实现页面内部左右滑动的切换
qq_57219457的博客
08-23 6002
uniapp小程序页面内滚动、方便自己cv
uniapp swiper不自适应高度问题--解决方案
weixin_44179923的博客
06-17 600
主要是记住一点 就是swiper的父节点加上。就可以了 也不用去动态计算高度。遇到这种结构，需要在。
微信小程序之swiper轮播图中的图片自适应高度的方法
12-02
在微信小程序开发中，轮播图（Swiper）是一个常用组件，用于展示多张图片或内容的自动切换效果。然而，默认情况下，Swiper组件的高度是固定的150px，这可能导致图片不能自适应不同分辨率的屏幕，特别是当图片的高度...
微信小程序使用swiper组件实现类3D轮播图
01-03
在写微信小程序时，有写到实现3D轮播图的效果，可以直接使用微信小程序中自带的组件swiper来实现 效果图如下： 1.swiper的相关属性 indicator-dots 是否显示小圆点，也可以自己重新设置小圆点 circular 是否衔接...
微信小程序修改swiper默认指示器样式的实例代码
10-18
在微信小程序中，Swiper组件通常用于实现轮播图效果，包括图片或其他内容的自动滑动展示。然而，Swiper的默认样式可能无法满足所有设计需求，这时就需要自定义其样式，尤其是指示器（小圆点）的部分。本文将通过一个...
vue使用swiper实现中间大两边小的轮播图效果
10-15
在本文中，我们将深入探讨如何使用Vue.js和Swiper库来创建一个特殊的轮播图，该轮播图具有中间图片放大而两侧图片缩小的效果。Vue.js是一个流行的前端框架，Swiper则是一个强大的滑动组件，适合构建轮播图、幻灯片和...
微信小程序swiper实现滑动放大缩小效果
10-17
主要介绍了微信小程序swiper实现滑动放大缩小效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
uniapp 的tabbar 里面的swiper 在手机上没有高度
好人一生平安
07-31 562
采用flex布局的 swiper默认高度为150px; 我给swiper设置了100%，在安卓和ios的设备里面显示高度为0，在h5 微信端没有这个问题。 最后 我只能设置了一个高度。 记录一下，若有解决方案再更新 ...
uni-app自定义幻灯组件swiper自适应高度
骑着双鱼去赶集
11-15 1704
用Uni-app做的swiper幻灯片组件，图片在APP端正常情况下无法自适应高度。 手动写高度也非常鸡肋。 那么如何让它自适应高度呢？ 现提供一个简单自定义幻灯模板组件 <template> <view> <swiper class="swiper flex flex-center" :style="{'height':Dheight+'px'}" :indicator-dots="indicatorDots" :autoplay="autoplay" :i..
uniapp动态获取swiper的高或宽
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
10-15 1258
在布局设置一下高度为动态的 <swiper class="tabs" @change="swipers" :current="actvic" :style="'height: ' {{ height}}'px;'"> </swiper> 声明height函数 data() { return { height: 500, } },
微信小程序-----解决swiper默认高度150px
weixin_45102071的博客
04-24 5476
微信小程序缺陷就是swiper是固定死的150px高度，这样如果传入的图片大于这个高度就会被隐藏。那么，怎样让图片自适应不同分辨率呢？ 思路是：获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下swiper的高度 .wxml部分 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{...
uniapp中解决swiper高度自适应内容高度
等归,的博客
12-01 3953
uniapp中解决swiper高度自适应问题
踩坑uni中swiper高度固定无法自适应问题
qq_55695208的博客
03-08 847
以下是全部代码，我在swiper中写了很多图片，但是只能显示一点，因为uniapp里面的swiper具有默认高度问题，默认高度为150px。图片无法自适应撑开高度，只能写固定高度，给固定值。上述代码仅作了一点修改，我们获取的时oneDom节点的高度，所以v-for不能写在上面，可以用一个无语义的block来循环。显然这种方法并不可取，解决方案就是使用利用获取节点高度的方法来动态绑定高度。
uni-app swiper内容高度自适应问题解决
zhangxy的博客
10-27 5664
轮播图内容非图片而是文本内容时，高度无法自适应问题处理 在切换轮播时调用该方法，给swiper标签赋高 getSwiperHeight() { let query = uni.createSelectorQuery().in(this); query.select(element).boundingClientRect(); query.exec((res) => { if (res) { this.swiperHeight = res[0].height; // swipe
uniapp开发小程序轮播图代码
05-25
Uniapp支持使用第三方库来实现轮播图的效果，比如使用Swiper插件。以下是使用Swiper插件实现轮播图的代码示例： 1. 安装Swiper插件 ```bash npm install @livelybone/swiper --save ``` 2. 在需要使用轮播图的页面中引入Swiper组件 ```vue <template> <div> <swiper :options="swiperOptions"> <swiper-slide v-for="(item, index) in list" :key="index"> <img :src="item.imgUrl" alt=""> </swiper-slide> </swiper> </div> </template> <script> import Swiper from '@livelybone/swiper' export default { components: { Swiper }, data() { return { list: [ { imgUrl: 'xxx' }, { imgUrl: 'xxx' }, { imgUrl: 'xxx' } ], swiperOptions: { // Swiper参数配置 autoplay: true, loop: true } } } } </script> ``` 其中，`list`是轮播图的数据源，`swiperOptions`是Swiper的参数配置。 3. 在`App.vue`中全局引入Swiper样式 ```vue <style> @import "@livelybone/swiper/dist/swiper.css"; </style> ``` 这样就可以在Uniapp中实现轮播图的效果了。具体的参数配置和使用方法可以参考Swiper的官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值