Small micro-channel scroll-view program automatically adapt to the height of the screen to use

       In writing the letter micro small program, often encounter pages need to demand slide up and down, this time you need to use the scroll-view, but must set its height using the scroll-view components, in the top of the page is a navigation bar, the contents of the bottom of the need to scroll, which needs to be calculated in real time scroll-view according to the height of the screen height, approach me before using WXML method of micro-channel to obtain the height of the top tab bar in real time, and then calculated in real time scroll-view the height of. This method is not only time-consuming but the effect is not how good, but then I wonder if we can use css to achieve this effect it a try really can. Now the idea css achieved record as follows:

1. Set the parent element of a scroll-view style

{
    width:100%;
    height:100%;
    overflow:hidden;
}

2. Set the scroll-view style

{
    width:100%;
    height:100%;
}

3. Set the style scroll-view of the last item

{
    margin-bottom:tab栏的高度+item底部想留白的高度;
}

This realization of the scroll-view screen height adaptive component, is not very easy to do, than the tedious calculation more simple, like to point a praise it

Published 27 original articles · won praise 6 · views 20000 +

Guess you like

Origin blog.csdn.net/github_37673306/article/details/87071848