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

【关键词】

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

【问题背景】

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

如下图所示

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

【解决方案】

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

修改如下：

        <div class="item-container"><div class="item-content"><list class="list" style="columns: 2; layout-type: stagger"><list-item type="item5" for="item in staggerlist" style="height:{{item.height}}px;"><text class="txt">{{ item.name }}</text></list-item><list-item type="item6" class="load-more" if="{{loadMore}}" style="column-span: 2"><progress type="circular"></progress><text>更多...</text></list-item></list></div></div>

截图：

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

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

实现代码如下：

<template><!-- Only one root node is allowed in template. --><div class="container"><tabs><tab-content><div class="item-container"><image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image><image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image><image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image><div class="item-content"><list class="list" style="columns: 2; layout-type: stagger" scrollpage="true"><list-item type="item1" style="background-color: white; border-radius: 10px; column-span: 2"><div style="flex-wrap: wrap"><text class="item" for="textlist">{{ $item }}</text></div></list-item><list-item type="item2" style="column-span: 2"><swiper style="width: 100%; height: 200px; margin-top: 20px"><image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image><image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image><image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image></swiper></list-item><list-item type="item3" style="margin-top: 20px; background-color: white; border-radius: 10px; column-span: 2"><text style="width: 100px">1</text><text style="width: 100px">2</text><text style="width: 100px">3</text></list-item><!-- <list-item type="item4" for="itemlist"><text class="txt" style="height: 150px">{{ $item }}</text></list-item> --><list-item type="item5" for="item in staggerlist" style="height:{{item.height}}px;"><text class="txt">{{ item.name }}</text></list-item><list-item type="item6" class="load-more" if="{{loadMore}}" style="column-span: 2"><progress type="circular"></progress><text>更多...</text></list-item></list></div></div><!-- tab page2 --><div class="item-container"><div class="item-content"><list class="list" style="columns: 2; layout-type: stagger"><list-item type="item5" for="item in staggerlist" style="height:{{item.height}}px;"><text class="txt">{{ item.name }}</text></list-item><list-item type="item6" class="load-more" if="{{loadMore}}" style="column-span: 2"><progress type="circular"></progress><text>更多...</text></list-item></list></div></div></tab-content><tab-bar><text class="tab-text">tab1</text><text class="tab-text">tab2</text></tab-bar></tabs></div></template><style>.container {flex-direction: column;justify-content: center;align-items: center;background-color: rgb(9, 253, 9);}.tab-bar {height: 100px;border-color: #bbbbbb;color: #bbbbbb;border-bottom-width: 1px;}.tab-text {width: 300px;text-align: center;}.tab-text:active {color: #f76160;}.list {width: 100%;height: 100%;}.txt {width: 100%;margin: 10px;background-color: white;}.item {height: 150px;width: 150px;text-align: center;border: 1px solid #000000;margin: 10px;}.item-container {padding-top: 30px;padding-left: 30px;padding-right: 30px;flex-direction: column;}.load-more {justify-content: center;align-items: center;height: 100px;border-color: #bbbbbb;border-bottom-width: 1px;}</style><script>module.exports = {data: {textlist: ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7', 'test8'],itemlist: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],staggerlist: [{ height: 100, name: 'A' }, { height: 300, name: 'B' }, { height: 250, name: 'C' }, { height: 220, name: 'D' }, { height: 300, name: 'E' }, { height: 100, name: 'F' }, { height: 90, name: 'G' }, { height: 170, name: 'A' }, { height: 320, name: 'B' }, { height: 150, name: 'C' }, { height: 120, name: 'D' }, { height: 200, name: 'E' }, { height: 100, name: 'F' }, { height: 60, name: 'G' }],loadMore: true,},}</script>