【快应用】list组件属性的运用指导

【关键词】

list、瀑布流、刷新、页面布局

【问题背景】

1、  页面部分内容需要瀑布流格式展示,在使用lsit列表组件设置columns进行多列渲染时,此时在里面加入刷新动画时,动画只占了list组件的一列,并没有完全占据一行宽度,这种情形我们该如何处理?

如下图所示

【快应用】list组件属性的运用指导_第1张图片

2、当页面是可滑动时,嵌套了一个list组件,滑动list组件时,页面的内容不会跟着list组件滑动,只有当list组件滑动到顶/底,不能滑动时才能滑动页面的内容,这个我们该如何避免?

【解决方案】

1、是因为在设置list列数后,list-item是会跟设置的列数平均分配,所以会出现动画组件占了一部分的问题,我们可以给想要独占一行渲染的list-item组件设置column-span属性即可解决,即list中的columns设置的是多少,在对应的list-item中的column-span就设为多少。

修改如下:

        
{{ item.name }} 更多...

截图:

【快应用】list组件属性的运用指导_第2张图片

Tips:ist-item的column-span数值小于等于其父组件list的columns数值,则表现为占有column-span列宽度的样式;否则,list-item 组件将表现为column-span: 1的样式。

2、  该问题可以设置list的scrollpage属性为true,将list顶部页面中非list部分随list一起滑出可视区域。

实现代码如下:



 



 

你可能感兴趣的:(list,华为)