微信小程序scroll-view高度自适应
微信小程序scroll-view高度自适应
scroll-view高度自适应自动填充屏幕,或自动填充剩余高度。
第一种情况,scroll-view占据整屏
直接设置css样式即可
// 占据整屏 css样式
scroll-view {
height: 100vh;
}
第二种情况,scroll-view占据剩余屏幕
测试的布局
// 测试布局
<view class="box">
<view class="view"></view>
<scroll-view class="box-scroll"></scroll-view>
</view>
布局样式
// 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;
}
第三种情况,上面多个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();
注:如果需要100%适配就需要获取除scroll_view外的全部view的高度,用已获取的屏幕高度进行计算 (或将scroll_view之外的布局包裹在一个大的view中,这样就可以使用第二种情况进行处理)
如果用的是uniapp开发,将代码中的 wx. 改成 uni. 即可
以上是本人工作中用的一些处理方式,如果对您有所帮助,就是我更新的动力,如有您有或发现更优的方式可分享我一下,与君共勉!