npm.io
1.0.15 • Published 6 years ago

flowlistvue

Licence
ISC
Version
1.0.15
Deps
0
Size
60 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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, 只处理了每列宽度相同的情况

Keywords

flowlistvue