微信小程序-瀑布流的制作方式

202 阅读1分钟

非真正意义上的瀑布流,简单实现。

效果图

实现

一、将item项封成组件

过程省略

二、父组件中引用

<view class="list">
	<view class="list-item">
            <block wx:for="{{goods}}" wx:key="id" wx:if="{{index%2 == 0}}">
            	<v-product objItem="{{item}}" bindgoinfo="onInfo"></v-product>
            </block>
	</view>
    	<view class="list-item">
            <block wx:for="{{goods}}" wx:key="id" wx:if="{{index%2 != 0}}">
                <v-product objItem="{{item}}" bindgoinfo="onInfo"></v-product>
            </block>
	</view>
</view>
.list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}