请问一下,我在页面分成了上下两部分,上部分是固定的一个view,下部分是一个scroll-view组件,需要根据屏幕大小进行自适应高度适配,这个scroll-view的高度应该怎么设置啊?
我用var dev = wx.getSystemInfoSync();获取设备高度,然后减去view的高度,但是貌似在不同的拼上会导致scroll-view的高度并没有完全延伸到底部,而是会剩余或者超出。
<scroll-view scroll-y="true" style="height:{{height}}px"
bindscroll="scrollView"
bindscrolltolower="bottomScroll" scroll-into-view="{{scrollId}}">
正巧我刚做这个,告诉你之。
用flex布局:
<view class="MainContent">
<view class="TopBlock">
TopBlock
</view>
<view class="BottomBlock">
<scroll-view class="ScrollView" scroll-y="true">
<text>……</text>
</scroll-view>
</view>
</view>
CSS:
page {
display: flex;
height: 100%;
width: 100%;
}
.MainContent {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.TopBlock {
height: 200rpx;
}
.BottomBlock {
display: flex;
flex: 1;
overflow: auto;
}
重点在CSS的.BottomBlock里得写上overflow-y:auto,否则在开发工具上虽然能显示正常,但真机调试里还是显示错误,今儿我刚琢磨出来的……
我刚刚发现了一种更好的办法,我是参考了这篇文章http://www.webhek.com/post/css-100-percent-height.html
具体办法是,先在当前页面的wxss里面加入以下样式:
page{
height:100%;
}
page元素是整个页面的根元素,相当于html里面的html标签。
然后把scroll-view的各级父元素均设置height:100%
然后就可以设置scroll-view和上方固定区域的height为相应的百分比了
这样就可以实现效果了
又优化了一下,page的大小设为这样比较合适,
page {
height: 92% ;
}
经过测试,模拟器上的各种分辨率和我的真机都没有问题
你这样不是scroll-view的滑动,而是page的滑动
标记下,正好遇到这个问题
动态计算高度时 多减去64px就可以了,完美解决问题,不要谢我哦 我是雷锋
如何可以不让SCROLL-VIEW覆盖最底下一行
给你一个筘简约而不筒单的家装定造世界。。。。。
如何添加标签?
真机上的overflow-y:auto。可以滑动,是自然滚动,不是<scroll-view>的滚动,这应该是一个BUG。试了好久,没有什么完美解决办法,唉!动态计算scroll-view高度也是不起作用。真是没有办法啊,好难搞这个。
大家好。scroll-view滑到最上边(触顶),加载更多(历史数据)时,滚动轴位置保持不变有没有好的解决方法
大家好