微信小程序scroll-view自动适应屏幕高度的使用方法

       在写微信小程序时,经常会遇到页面需要上下滑动的需求,这个时候就需要用到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组件自适应屏幕高度了,是不是很方便呢,比繁琐的计算简单多了,喜欢就点个赞吧

发布了27 篇原创文章 · 获赞 6 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/github_37673306/article/details/87071848