wx:for,wx:if,image的应用疑问
发布于 5 年前 作者 iwen 983 次浏览 来自 问答

******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 回复

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

感谢,我试试。。

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

回到顶部