zqy009
zqy009
  • 发布:2019-03-22 12:00
  • 更新:2019-03-22 14:17
  • 阅读:1495

【报Bug】scroll-view在苹果手机上无法对齐的问题,在安卓手机上是正常的,

分类:uni-app

详细问题描述

在苹果手机上,使用scroll-view组件水平滑动时,如果每一项的内容不一致,会导致无法对齐,错位的问题
[内容]

重现步骤

[步骤]
1.创建 Hello-uni-app ,使用官方提供的demo,找到 pages>component>scroll-view>scroll-view.vue
2.修改scroll-view.vue中横向滚动的代码 <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>改为

<view id="demo2" class="scroll-view-item_H uni-bg-green">B
<view style="line-height: 90upx;">这是第一行</view>
<view style="line-height: 90upx;">这是第二行</view>
</view>

完整的横向滚动代码如下
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item_H uni-bg-green">B
<view style="line-height: 90upx;">这是第一行</view>
<view style="line-height: 90upx;">这是第二行</view>
</view>
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
</scroll-view>

  1. 在苹果手机的浏览器上或者微信浏览器上运行该界面

[结果]

[期望]
能达到跟安卓手机上一样的效果

IDE运行环境说明

[HBuilderX]
[1.7.0.20190314]
[windows版本号]

uni-app运行环境说明

[运行端是h5]
[任意的苹果手机运行]

附件

[可重现代码片段]
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item_H uni-bg-green">B
<view style="line-height: 90upx;">这是第一行</view>
<view style="line-height: 90upx;">这是第二行</view>
</view>
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
</scroll-view>

联系方式

[550129196]

2019-03-22 12:00 负责人:无 分享
已邀请:
zqy009

zqy009 (作者)

用了一种笨戳的方式解决了,将渲染后的 .uni-scroll-view下的第一个div设置 flex顶部对齐能解决
.uni-scroll-view>div{display: flex;align-items:flex-start;}

该问题目前已经被锁定, 无法添加新回复