Bootstrap

小程序瀑布流重构

背景:现有的左右两栏布局,会导致无障碍读屏的时候,一直读左边栏里的内容

实现方案

一、布局

当不使用左右两栏布局的时候,

主要是怎么确定当前元素应该放到左边还是右边

二、使用 relations

使用 relations 定义和使用父子组件,详见

父组件:waterfall

子组件:waterfall-item

这样就可以通过 this.parent 或者 this.child 直接访问对应组件内的属性和方法

比如在子组件内调用父组件的方法

二、性能

一般的做法是不停的获取到新一屏的数据就不断的concat进来,再去setState

这样的话,到后期这个 list 会越来越大,由于setData的调用会把数据从逻辑层传到渲染层,数据太大会增加通信时间。在性能不好的机型上,setState就会占用很长的时间,从而造成页面卡顿。

而我们通过改成二维数组,二维数组里的每一个子数组都用来装一屏的数据,然后每次只setState当前的下一屏幕的数据,就可以减少这个通信时间。

例如