更新记录
v1.2(2020-09-24) 下载此版本
既然有人说是假的瀑布流,那就把它解决了~ 更新自动对高
v1.1(2020-09-08) 下载此版本
修改数据自动更新的bug
v1.0(2020-09-08) 下载此版本
不用导入任何插件的东西,直接使用组件嵌套布局就可以了,几行代码就可以搞定。
查看更多平台兼容性
瀑布流布局
其实瀑布流布局原理很简单,就是变成多列布局,虽然原理简单,每次写起来也挺麻烦,索性写个通用组件。
使用方式
1.引入组件
import flowLayout from "@/components/eiml-flow/eiml-flow.vue"
export default {
components:{
'flowLayout':flowLayout
},
2.使用组件
<flowLayout :columnNum="2">
<!-- 此处写循环布局就可以了,需要注意 :slot="index" 必须这么写,因为空间内,是通过它来展示的 -->
<view v-for="(item,index) in list" v-bind:key="index" :slot="index">
</view>
</flowLayout>
该版本支持H5,如果需要支持微信小程序请转移脚步:https://ext.dcloud.net.cn/plugin?id=2850