收藏
回答

scroll-view 高度不会自动拉高

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 客户端 6.7.0 2.2.3
<scroll-view scroll-x style="min-height: 200px;text-align:center;width:85%;" >
 
    <view class="table" style="width:1400rpx;margin:0px auto;border:0;">
 
        <view class="tr">
 
            <view class="td" style="width:160rpx;">货号</view>
 
            <view class="td" style="width:200rpx;">品名</view>
 
            <view class="td" style="width:120rpx;">目前库存</view>
 
            <view class="td" style="width:120rpx;">规格</view>
 
            <view class="td" style="width:120rpx;">型号</view>
 
            <view class="td" style="width:120rpx;">产地</view>
 
            <view class="td" style="width:120rpx;">类型</view>
 
            <view class="td" style="width:80rpx;">单位</view>
 
        </view>
 
        <view class="tr" wx:for="{{productList}}" wx:key="*this" wx:for-item="item">
 
            <view class="td" style="width:160rpx;">{{item.FGoodsID}}</view>
 
            <view class="td" style="width:200rpx;">{{item.FGoods}}</view>
 
            <view class="td" style="width:120rpx;">{{item.FQty}}</view>
 
            <view class="td" style="width:120rpx;">{{item.FGoitem}}</view>
 
            <view class="td" style="width:120rpx;">{{item.FGostyle}}</view>
 
            <view class="td" style="width:120rpx;">{{item.FGoArea}}</view>
 
            <view class="td" style="width:120rpx;">{{item.FGoType}}</view>
 
            <view class="td" style="width:80rpx;">{{item.FUnit}}</view>
 
        </view>
 
        <view class="tr">
 
            <view class="td" style="width:160rpx;">合计</view>
 
            <view class="td" style="width:200rpx;"> </view>
 
            <view class="td" style="width:120rpx;">{{FQty}}</view>
 
            <view class="td" style="width:120rpx;"> </view>
 
            <view class="td" style="width:120rpx;"> </view>
 
            <view class="td" style="width:120rpx;"> </view>
 
            <view class="td" style="width:120rpx;"> </view>
 
            <view class="td" style="width:80rpx;"> </view>
 
        </view>
 
        <view class="tr">
 
            <view class="td" style="width:100%;text-align:left;">共:{{productList.length}}条记录</view>
 
        </view>
 
    </view>
 
</scroll-view>



在开发者工具下呈现正常,会自动拉高页面

在IOS真机下测试高度只有min-height的高度,不会自动拉高。



开发者模式下:




真机模式下:


最后一次编辑于  2018-08-22
回答关注问题邀请回答
收藏

3 个回答

  • 🚗🚕🚙🚌🚎🚒🚐🚚
    🚗🚕🚙🚌🚎🚒🚐🚚
    2018-08-22

    最不济的方法就是js动态获取内容高度,再赋给scroll-view

    2018-08-22
    有用
    回复 4
    • 卖女孩的小火柴
      卖女孩的小火柴
      2018-08-22

      但是如果内容超出td的宽度,会自动转行,这个时候高度就获取不了啦。


      而且算出来结果也不一定准确...

      我.td类的直接设定了宽度,

      类里面有设置border和padding

      我把所有宽度都加起来赋值给.table 作为.table的宽度

      但是和实际相差还是少了200rpx~300rpx左右的宽度。

      2018-08-22
      回复
    • 🚗🚕🚙🚌🚎🚒🚐🚚
      🚗🚕🚙🚌🚎🚒🚐🚚
      2018-08-23回复卖女孩的小火柴

      不用scroll-view,就是一般的view,css不能实现吗,水平方向滚动,竖直auto

      2018-08-23
      回复
    • 卖女孩的小火柴
      卖女孩的小火柴
      2018-08-23回复🚗🚕🚙🚌🚎🚒🚐🚚

      卧槽,我砖牛角尖了,

      的确view加上-webkit-overflow-scrolling: touch;和scroll-view体验一致。

      2018-08-23
      回复
    • 🚗🚕🚙🚌🚎🚒🚐🚚
      🚗🚕🚙🚌🚎🚒🚐🚚
      2018-08-23回复卖女孩的小火柴

      差点被你带沟里

      2018-08-23
      回复
  • 卖女孩的小火柴
    卖女孩的小火柴
    2018-08-22

    我也知道表格在手机上呈现效果不理想

    但是甲方需求是这样我还能怎么样?


    现在问题就是scroll-view 设置了 scroll-x 横向滚动模式,

    在开发者工具中表现正常,会自动增长拉高

    但在真机IOS下无法拉高.......


    @林超 @官方   快点出现吧,如果是bug的话我就换其他方式呈现了,因为牵扯到好几个页面- -!


    2018-08-22
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-08-22

    scroll-view为啥要拉高呢?拉高了还怎么滚?

    2018-08-22
    有用
    回复 3
    • 卖女孩的小火柴
      卖女孩的小火柴
      2018-08-22

      我是用作横向滚动.....

      拉高了和横向滚动没有冲突吧

      2018-08-22
      回复
    • 卢霄霄
      卢霄霄
      2018-08-22回复卖女孩的小火柴

      额。。这样的啊。木有试过,听起来像是个bug呢。。明天试试去

      2018-08-22
      回复
    • 卖女孩的小火柴
      卖女孩的小火柴
      2018-08-22回复卢霄霄

      就是这样,

      本来是用flex的方式来呈现,

      一个flex下面2个item

      一共4行flex解决了。


      但是客户说他们有很多条记录,1条记录就显示4行,这样看起来很吃力,

      并且丢来了需求说要做成table形式,不够长就横向滚,所有的列都需要不能隐藏。

      2018-08-22
      回复
登录 后发表内容