收藏
回答

scroll-view组件

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


回答关注问题邀请回答
收藏

16 个回答

  • 周冉
    周冉
    2017-01-10

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

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

    2017-01-10
    有用 2
    回复 1
    • vyron
      vyron
      2020-10-30
      有用,就是scroll-view外面再嵌套一层感觉怪怪的,不知道为什么小程序不支持scroll-view直接flex:1🤔
      2020-10-30
      回复
  • gou
    gou
    2018-06-12

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

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

    page{

        height:100%;

    }


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

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

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

    这样就可以实现效果了


    2018-06-12
    有用
    回复 3
    • gou
      gou
      2018-06-12

      又优化了一下,page的大小设为这样比较合适,

      page {

          height: 92% ;

      }

      经过测试,模拟器上的各种分辨率和我的真机都没有问题

      2018-06-12
      回复
    • David
      David
      2018-06-21回复gou

      你这样不是scroll-view的滑动,而是page的滑动

      2018-06-21
      回复
    • 贾鹏飞
      贾鹏飞
      06-21
      我就是用这种办法,非常爽,百试百灵
      06-21
      回复
  • 太阳黑子
    太阳黑子
    2018-01-22

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

    2018-01-22
    有用
    回复
  • Change
    Change
    2017-10-28

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

    2017-10-28
    有用
    回复
  • 远方
    远方
    2017-09-13

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


    2017-09-13
    有用
    回复
  • 生哥《美的集成灶》13360707939
    生哥《美的集成灶》13360707939
    2017-07-31

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

    2017-07-31
    有用
    回复
  • 李开明
    李开明
    2017-07-25

    如何添加标签?

    2017-07-25
    有用
    回复
  • 徒安生
    徒安生
    2017-07-20

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

    2017-07-20
    有用
    回复
  • 范范范先森
    范范范先森
    2017-07-07

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

    2017-07-07
    有用
    回复
  • 黄金福彩体彩吧
    黄金福彩体彩吧
    2017-06-23

    大家好

    2017-06-23
    有用
    回复

正在加载...

登录 后发表内容