******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出來后全面都是每行輸出一個圖。
網(wǎng)友回復:
<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>
在樓上的基礎(chǔ)上,再在.imageListCss {}里面加一句 flex-wrap: wrap; 就行了,設(shè)置自動換行
感謝,我試試。。
沒毛病,解決問題。
愛盈利-運營小咖秀(www.jza6.com) 始終堅持研究分享移動互聯(lián)網(wǎng)App運營推廣經(jīng)驗、策略、全案、渠道等純干貨知識內(nèi)容;是廣大App運營從業(yè)者的知識啟蒙、成長指導、進階學習的集聚平臺;
想了解更多干貨知識,請關(guān)注公眾號運營小咖秀(ID: yunyingshow)