【Key words】
list, waterfall, refresh, page layout
【Problem background】
1. Part of the content on the page needs to be displayed in a waterfall format. When using the lsit list component to set columns for multi-column rendering, when adding a refresh animation, the animation only occupies one column of the list component and does not completely occupy the width of a line. How should we deal with this situation?
As shown below
2. When the page is slidable, a list component is nested. When the list component is slid, the content of the page will not slide with the list component. Only when the list component slides to the top/bottom and cannot be slid, can the content of the page be slid. This How can we avoid it?
【solution】
1. Because after setting the number of list columns, the list-item will be evenly distributed with the set number of columns, so there will be a problem that the animation component occupies a part. We can set the column for the list-item component that wants to render a row exclusively The -span attribute can be solved, that is, as much as the columns in the list are set, the column-span in the corresponding list-item is set as much.
Modify as follows:
<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>screenshot:
Tips: If the value of column-span of ist-item is less than or equal to the value of columns of its parent component list, it will be displayed as a style occupying the width of the column-span column; otherwise, the list-item component will be displayed as a style of column-span: 1.
2. For this problem, you can set the scrollpage attribute of the list to true, and slide the non-list part of the top page of the list out of the visible area along with the list.
The implementation code is as follows:
<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>