问题现象：在ios端苹果真机测试

9074946dfab0c32f94e92b053b2f4317.png

在安卓端和微信小程序开发模式都是正常的

先测试了文本问题以为是省略号影响的：
scroll-view中设置了scroll-x="true"后，，可滚动视图区域暂时还不能横向滚动。需要把scroll-view的样式设置为white-space: nowrap; 并且子元素设置为 display: inline-block，这样就能横向滚动了；
正是因为scroll-view设置了white-space：nowrap属性，所以文本不能换行了，解决方案是
在需要换行的文本中添加white-space: normal，就能换行了
结果不是！！！

      <view  class="hot-song-sheet" slot="content">
        <scroll-view scroll-x  class="hot-song-sheet-scroll">
          <block wx:for="{{hotSongSheets}}" wx:key="id">
            <view class="song-sheet">
              <song-sheet 
                song-sheet-id="{{item.id}}"
                song-sheet-name="{{item.name}}"
                cover-img-url="{{item.coverImgUrl}}"
                play-count="{{item.playCount}}"
                ></song-sheet>
            </view>
          </block>
        </scroll-view>
      </view>

    .hot-song-sheet {
      box-sizing: border-box;
      white-space: nowrap;
      .song-sheet {
        display:inline-block;
        width: 220rpx;
        height: 308rpx;
        margin-right: 18rpx;
        vertical-align: top;
      }
    }

解决办法：

item用了inline-block，使用vertical-align: bottom; 或者vertical-align:top;