scroll-view组件在ios上样式问题
发布于 5 年前 作者 guna 20434 次浏览 来自 问答

在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;

}

回到顶部