flowlistvue
v1.0.15
Published
flow list in vue
Downloads
5
Readme
I found I have 20 downloads on NPM; So I decide to do my best to improve this component;
Props
| 参数 | 说明 | 类型 | 默认值 | 必填 |
| ----------- | ------------------------------- | ----------- | ------ | ------ |
| list
| 传入的数据 | Array
| [] | N |
| order
| 每页是否按序,list长度每次增加时,新增的是否按照原顺序依次添加,为true时依次添加,为false时优化排序(使每列相差最小)后添加 | boolean
| flase | N |
| lineNum
| 有多少列 | Number
>=2 | 2 | N |
| rowGap
| 每行之间的间距,单位包括(px,rem,vw) | String
| 10px | N |
| justifyContent
| 每列如何排序, spaceBetween两端对齐;spaceAround剩余空间均分;Number列之间间距固定,单位px,整体在容器中居中 ; | Number
或 spaceBetween或spaceAround | spaceBetween | N |
使用
import flowlist from 'flowlistvue';
Vue.use(flowlist);
<flow-list :list="list" :order="false" :lineNum="4" :justifyContent="justifyContent">
<template v-for="(item,index) in list">
/**data为插槽props,就是list中这一项的item*/
/**自定义每项的内容*/
</template>
</flow-list>
<script>
//当是同一个引用,新增时
this.list.push(...res.list);
//等等vue中的数组变异方法
//或不是同一个引用,会全部重新渲染,不会沿用上次的渲染结果
this.list = [...]
</script>
是否乱序
按序时,例如四列,第一页[1,2,3,4,5] 排列为 * 1,2,3,4, * 5, * 第二页[6,7,8,9,10,11] 此时排列为 * 1, 2, 3, 4, * 5, 6, 7, 8, * 9, 10,11,
不按序时,每页内容不变,但是会根据每列的长度自动调整顺序,使每列总长度相差最小
注意
a, 要求块的高度在渲染后不会再动态改变
比如有个img,那么这个img开始时就要定高(在接口要求返回图片的高度), 组件不处理“除文字外其他内容加载导致之后块大小变化”的逻辑
b, 不会修改块的样式,也不会影响块内数据的绑定
只是给每个$slots.default加上了定位容器,每个内容块本身不受影响
c, 乱序时的性能
每次新增的块可以乱序,乱序可以使每列的总长度相当接近,比较美观
d, ⚠️每个块必须规定一个唯一key属性
e, list重新赋值(不是同一个引用)会重新渲染
如果块内的内容增加或减少导致了高度增加或塌陷,可以使用this.list = [...this.list]重新绘制, 但是会导致“该位置之后的”块重新排列,造成不好的体验,所以尽量不要在排列好之后改变块的高度
f, 只处理了每列宽度相同的情况