HarmonyOS鸿蒙Next中【快应用】list组件属性的运用指导

HarmonyOS鸿蒙Next中【快应用】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>

截图：

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">
          <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="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>