问题现象:在ios端苹果真机测试
在安卓端和微信小程序开发模式都是正常的
先测试了文本问题以为是省略号影响的:
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;
}
}
解决办法: