收藏
回答

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

******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 个回答

  • 三丰Gjin,3d探测,stk,一江#futlais
    三丰Gjin,3d探测,stk,一江#futlais
    2017-10-29

    感谢,我试试。。


    2017-10-29
    有用
    回复
  • 修行者
    修行者
    2017-10-29

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

    2017-10-29
    有用
    回复
  • 赵青山
    赵青山
    2017-10-29

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


    2017-10-29
    有用
    回复
登录 后发表内容