【微信小程序scroll-view高度自适应】_小程序scrollview高度自适应

微信小程序scroll-view高度自适应

scroll-view高度自适应自动填充屏幕，或自动填充剩余高度。

第一种情况，scroll-view占据整屏

直接设置css样式即可

// 占据整屏 css样式
scroll-view {
	height: 100vh;
}
1
2
3
4

第二种情况，scroll-view占据剩余屏幕

测试的布局

// 测试布局
<view class="box">
	<view class="view"></view>
 	<scroll-view class="box-scroll"></scroll-view>
</view>
1
2
3
4
5

布局样式

// css样式
box {
	display: flex;
	flex-direction:column;
	height:100vh;
 	overflow:hidden;
}
.view {
 	flex-shrink: 0;
 	height: 50px;
}
// 直接设置flex：1高度依然不会自适应，需要添加一个默认高度1px就可以自适应了。
.box-scroll {
 	flex: 1;
 	height: 1px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

第三种情况，上面多个view布局，scroll-view占据剩余屏幕

这种情况主要用于已经完成的布局，但适配效果不好，又不想有大的改动
思路：找一个参考的布局通过uni.createSelectorQuery()获取其的高度，再通过uni.getSystemInfoSync().screenHeight获取屏幕高度，计算出大概的scroll_view之外高度即可（这个不能100%获取剩余的屏幕，通过适当的调整比例参数适配屏幕）

	// 比例值（用于参考高度的计算使用，如可直接获取scroll-view外部高度可不用，我这里适用的是2.5）
	const radio = 2.5
	// 获取屏幕高度
	const screenHeihgt = wx.getSystemInfoSync().screenHeight;
	// 获取参考物的高度（可计算的view的高度）
	const query = wx.createSelectorQuery().in(this);
	query.select('#swiper_view').boundingClientRect(data => {
		// 通过参考物计算出scroll-view的适当高度
		this.scrollHeihgt = screenHeihgt -  data.height * radio
	}).exec();
1
2
3
4
5
6
7
8
9
10

注：如果需要100%适配就需要获取除scroll_view外的全部view的高度，用已获取的屏幕高度进行计算 （或将scroll_view之外的布局包裹在一个大的view中，这样就可以使用第二种情况进行处理）
如果用的是uniapp开发，将代码中的 wx. 改成 uni. 即可

以上是本人工作中用的一些处理方式，如果对您有所帮助，就是我更新的动力，如有您有或发现更优的方式可分享我一下，与君共勉！