WXOPEN Club

scroll-view组件

发布于 6 年前作者 esu15636 次浏览最后编辑 6 年前来自 ask

请问一下，我在页面分成了上下两部分，上部分是固定的一个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}}”>

10 回复
yuanyong
yuanyong1 楼6 年前

我刚刚发现了一种更好的办法，我是参考了这篇文章http://www.webhek.com/post/css-100-percent-height.html

具体办法是，先在当前页面的wxss里面加入以下样式：

page{

    height:100%;

}

page元素是整个页面的根元素，相当于html里面的html标签。

然后把scroll-view的各级父元素均设置height:100%

然后就可以设置scroll-view和上方固定区域的height为相应的百分比了

这样就可以实现效果了

oyin
oyin2 楼6 年前

如何添加标签？

czhong
czhong3 楼6 年前

动态计算高度时 多减去64px就可以了，完美解决问题，不要谢我哦 我是雷锋

yan41
yan414 楼6 年前

正巧我刚做这个，告诉你之。

用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，否则在开发工具上虽然能显示正常，但真机调试里还是显示错误，今儿我刚琢磨出来的……

moxia
moxia5 楼6 年前

标记下，正好遇到这个问题

mguo
mguo6 楼6 年前

给你一个筘简约而不筒单的家装定造世界。。。。。

qiangfeng
qiangfeng7 楼6 年前

大家好。scroll-view滑到最上边（触顶），加载更多（历史数据）时，滚动轴位置保持不变有没有好的解决方法

oxia
oxia8 楼6 年前

真机上的overflow-y:auto。可以滑动，是自然滚动，不是<scroll-view>的滚动，这应该是一个BUG。试了好久，没有什么完美解决办法，唉！动态计算scroll-view高度也是不起作用。真是没有办法啊，好难搞这个。

icao
icao9 楼6 年前

如何可以不让SCROLL-VIEW覆盖最底下一行

qsu
qsu10 楼4 年前

大家好