在写微信小程序时,经常会遇到页面需要上下滑动的需求,这个时候就需要用到scroll-view了,而使用scroll-view组件时必须设置它的高度,在页面顶部是一个导航栏,而底部的内容就需要滚动,这需要根据屏幕的高度来实时计算scroll-view的高度,我之前的处理方式是利用微信的WXML方法去实时获取顶部tab栏的高度,再实时计算出scroll-view的高度。这种方法既费时而且效果也不怎么好,后来我想可不可以用css来实现这个效果呢,一试果然可以。现在将css实现的思路记录如下:
1.设置scroll-view的父元素的的样式
{
width:100%;
height:100%;
overflow:hidden;
}
2.设置scroll-view的样式
{
width:100%;
height:100%;
}
3.设置scroll-view中最后一个item的样式
{
margin-bottom:tab栏的高度+item底部想留白的高度;
}
这样就实现了scroll-view组件自适应屏幕高度了,是不是很方便呢,比繁琐的计算简单多了,喜欢就点个赞吧