微信小程序使用横向滚动样式为什么在ios端会出现高低不齐的问题?
overflow-x: scroll;white-space: nowrap;
在微信小程序中使用横向滚动后遍历列表在安卓机上每个子项排列整齐,在苹果机上会出现高低不齐的问题,请问如何解决?
ios:
安卓:
<view class="t4 cf">
<view class="item" wx:for="{{item.BookList}}" wx:for-item='i' wx:key='key'>
<view class="fm"><image src="{{i.img}}" mode="widthFix"></image></view>
<view class="txt">{{i.title}}</view>
</view>
</view>
.t4 {
margin-top: 15rpx;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.t4 .item {
display: inline-block;
width: 160rpx;
height: 225rpx;
margin-right: 30rpx;
}
.t4 .item image {
width: 100%;
display: block;
}
.t4 .item .fm {
height: 160rpx;
overflow: hidden;
}
.t4 .item .txt {
width: 100%;
height: 65rpx;
font-size: 24rpx;
color: #535353;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
从图上来看,样式高低不齐的都是两行文字的,建议用开发者工具真机模拟看下
无人知晓么?