百度小程序-循环数据,图文左右互换排列
.swan
<view class="content"> <view class="server"> <block s-for="item,index in DataInfo"> <navigator class="server-item" url="/pages/detail/detail?id={{item.id}}&title={{item.title}}"> <view class="server-item-img {{index%2==0?'server-iteml':'server-itemr'}}" > <image src="{{item.cover_id}}" mode="widthFix" lazy-load="true"></image> </view> <view class="server-item-box {{index%2==0?'server-iteml':'server-itemr'}}"> <view class="server-item-title">{{item.title}}</view> <view class="server-item-link {{index%2==0?'server-iteml':'server-itemr'}}">查看更多</view> </view> </navigator> </block> </view> </view>
.css
.server-item{overflow:hidden;box-shadow:0px 5px 5px 0px rgba(0,0,0,0.24);height:160rpx;margin-bottom:17rpx} .server-iteml{float:left;text-align:left} .server-itemr{float:right;text-align:right} .server-item-img,.server-item-box{width:50%;height:100%} .server-item-box{background:#1C83C5;height:100%;padding:20rpx 50rpx;box-sizing:border-box} .server-item-img{} .server-item-img image{width:100%;display:block;height:100px} .server-item-title{font-size:26rpx;font-weight:normal;font-stretch:normal;line-height:33px;letter-spacing:0px;color:#ffffff} .server-item-link{width:142rpx;height:38rpx;line-height:40rpx;font-size:22rpx;text-align:center;letter-spacing:0px;background:#fff;color:#1c83c5}
效果图