uniapp滑块视图容器swiper高度自适应 - 解决swiper显示不完整的问题

篇首语：本文由小编为大家整理，主要介绍了uniapp滑块视图容器swiper高度自适应 - 解决swiper显示不完整的问题相关的知识，希望对你有一定的参考价值。

问题所在

swiper无法自适应高度，内容显示不全。

解决思路（4个）

1.懒人法： 直接设置整个swiper高度，100vh等于全屏高度。 （idea来源）

Ns。jszhUoer.com

2.官方推荐：https://uniapp.dcloud.io/component/swiper.html 

使用竖向滚动时，需要给  一个固定高度，通过 css 设置 height。

就像  scroll-view height: 1200rpx;

3.自适应高度

Ns。jszhUoer.com

假如scroll-view内部是整齐的列表，我们可以统计列表的数量length，乘以每个的高度，
得出scroll-view最佳高度，再动态赋值即可，例如：
:style=""height":theHeightAfterComputed"

 如图，当前scroll-view里面有三个，每个高度是380rpx，那么：

==== html ======== JS ====computed: swiperMinHeight () let items = Math.max(this.newProducts.length, this.oldProducts.length)let height = items * 380console.log("swiperMinHeight() items = "+items)return height + "rpx"

4. 动态高度赋值办法
使用“uniapp获取元素的宽度、高度”再通过 :style=""height":theHeightAfterComputed"的动态赋值方式，写死swiper高度，也可以试一下。

Ns。jszhUoer.com

我没有实测方法4，懒人法适合我... :)

Ns。jszhUoer.com

以上是关于uniapp滑块视图容器swiper高度自适应 - 解决swiper显示不完整的问题的主要内容，如果未能解决你的问题，请参考以下文章