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

Posted 2022-03-30 Rudon滨海渔村

问题所在

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

解决思路（4个）

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

<swiper @change="change" style="min-height:100vh;">

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

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

就像  scroll-view height: 1200rpx;

3.自适应高度

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

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

==== html ====
<swiper  @change="cc" :style="'minHeight':swiperMinHeight">

</swiper>




==== JS ====

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

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

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