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

【报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;}

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

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容