在iOS上样式出现问题
wxml代码
<scroll-view class="scroll" scroll-x>
<view class='lei-boxs'>
<view class='lei-list' wx:for='{{dan1.productList}}' wx:key='{{index}}' bindtap='shopDetails' data-id='{{item.productId}}' >
<image src='{{item.picture}}' class='lei-list-img' mode='widthFix' ></image>
<view class='lei-info'>
<text class='lei-name'>{{item.title}}</text>
<view class='lei-money'>
<text class='lei-xian'>¥{{item.sellPrice}}</text>
<text class='lei-yuan' wx:if='{{item.marketPrice!=null}}'>¥{{item.marketPrice}}</text>
</view>
</view>
</view>
<view class='lei-list more' bindtap='moreList' data-id='{{dan2.activityId}}' data-ids='4' >
<image src='../../image/collect.png' class='lei-more-icon' ></image>
<text class='lei-more-text'>查看更多</text>
</view>
</view>
</scroll-view>
wxss代码
.scroll {
width: 100%;
position:absolute;
top:300rpx;
white-space:nowrap;
}
.lei-list{
display:inline-block;
width:220rpx;
height:326rpx;
background:#fff;
border-right:1rpx solid rgb(227,227,227);
border-top:1rpx solid rgb(227,227,227);
border-bottom:1rpx solid rgb(227,227,227);
overflow:hidden;
position:relative;
}
.lei-list:nth-child(1){
border-left:1rpx solid rgb(227,227,227);
margin-left:30rpx;
}
.lei-list-img{
width:220rpx;
height:220rpx;
display:block;
border-bottom:1rpx solid rgb(227,227,227);
background: rgb(248,248,248);
}
.lei-info{
height:106rpx;
}
.lei-name{
padding-left:20rpx;
font-size:24rpx;
color:#000;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin-top:15rpx;
margin-bottom:10rpx;
display:block;
}
.lei-money{
padding-left:20rpx;
display:flex;
align-items:center;
}
.lei-xian{
font-size:26rpx;
color:rgb(255,0,0);
margin-right:14rpx;
}
.lei-yuan{
font-size:20rpx;
color:rgb(159,159,159);
text-decoration:line-through;
}
.more{
background: rgb(248,248,248);
overflow:hidden;
position:relative;
display: inline-block;
}
.lei-more-icon{
width:50rpx;
height:50rpx;
display:block;
position:absolute;
left:0;
right:0;
margin:0 auto;
top:120rpx;
}
.lei-more-text{
font-size:30rpx;
color:rgb(159,159,159);
width:100%;
text-align:center;
display:block;
position:absolute;
left:0;
top:200rpx;
}
按照教程提供下代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
https://developers.weixin.qq.com/s/mdFWcqmD7T4e 代码片段地址
inline-block ios上的常见问题 加一个
vertical-align: middle;就不会了
好了,谢谢
不客气,点个赞吧
好了,谢谢