******HTML********
<view class='imageListCss' wx:for="{{imageList}}" >
<block wx:if="{{index%2===0}}" >
<image class="ImageLeft" mode="aspectFit" src="{{item}}" background-size="cover"></image>
</block>
<block wx:else>
<image class="ImageRight" mode="aspectFit" src="{{item}}" background-size="cover"></image>
</block>
</view>
*********CSS**********
.imageListCss {
width: 750rpx;
display: flex;
flex-direction:row;
justify-content:flex-start;
align-items:center;
}
.ImageLeft {
width: 50%;
}
.ImageRight {
width: 50%;
}
**********************************
这什么这里没办法一行输出两个图片,wx:for出来后全面都是每行输出一个图。
网友回复:
<view class='imageListCss'>
<block wx:for="{{imageList}}">
<block wx:if="{{index%2===0}}">
<image class="ImageLeft" mode="aspectFit" src="{{item}}" background-size="cover"></image>
</block>
<block wx:else>
<image class="ImageRight" mode="aspectFit" src="{{item}}" background-size="cover"></image>
</block>
</block>
</view>
在楼上的基础上,再在.imageListCss {}里面加一句 flex-wrap: wrap; 就行了,设置自动换行
感谢,我试试。。
没毛病,解决问题。
爱盈利-运营小咖秀(www.aiyingli.com) 始终坚持研究分享移动互联网App运营推广经验、策略、全案、渠道等纯干货知识内容;是广大App运营从业者的知识启蒙、成长指导、进阶学习的集聚平台;
想了解更多干货知识,请关注公众号运营小咖秀(ID: yunyingshow)