收藏
回答

scroll-view组件

请问一下,我在页面分成了上下两部分,上部分是固定的一个view,下部分是一个scroll-view组件,需要根据屏幕大小进行自适应高度适配,这个scroll-view的高度应该怎么设置啊?


我用var dev = wx.getSystemInfoSync();获取设备高度,然后减去view的高度,但是貌似在不同的拼上会导致scroll-view的高度并没有完全延伸到底部,而是会剩余或者超出。

    bindscroll="scrollView"

    bindscrolltolower="bottomScroll" scroll-into-view="{{scrollId}}">


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

16 个回答

  • 周冉
    周冉
    2017-01-10

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

    用flex布局:

       

            TopBlock

       

       

           

                ……

           

       


    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
    有用 1
    回复
  • 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
    有用
    回复 2
    • gou
      gou
      2018-06-12

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

      page {

          height: 92% ;

      }

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

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

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

      2018-06-21
      回复
  • GLaDOS
    GLaDOS
    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。可以滑动,是自然滚动,不是的滚动,这应该是一个BUG。试了好久,没有什么完美解决办法,唉!动态计算scroll-view高度也是不起作用。真是没有办法啊,好难搞这个。

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

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

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

    大家好

    2017-06-23
    有用
    回复

正在加载...

登录 后发表内容