wx:for,wx:if,image的应用疑问

发布于 7 年前作者 iwen1117 次浏览最后编辑 7 年前来自 ask

******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出来后全面都是每行输出一个图。

3 回复
na51
na511 楼6 年前

在楼上的基础上,再在.imageListCss {}里面加一句 flex-wrap: wrap; 就行了,设置自动换行

houguiying
houguiying2 楼6 年前

感谢,我试试。。

majun
majun3 楼5 年前

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