Ionic 2如何使离子列表从底部向上增长？

Posted 2023-03-06

【中文标题】Ionic 2如何使离子列表从底部向上增长？

【英文标题】：Ionic 2 how to make ion-list grow from bottom upwards?

【发布时间】：2017-05-08 15:20:57

【问题描述】：

这是我的代码的要点：

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of array">item.name</ion-item>
  </ion-list>
</ion-content>
<ion-footer>
  <ion-searchbar (ionInput)="search()"></ion-searchbar>
</ion-footer>

这个想法是在屏幕底部有一个搜索栏，其上方有一个列表，该列表会根据搜索栏输入而变化。但是，如果项目很少，此代码将使列表自上而下填充，并在其与搜索栏之间留出大量空白。我希望列表能够拥抱搜索栏（基本上与 ion-content 的底部对齐），同时在 ion-content 内仍保持可滚动。有哪些方法可以做到这一点？

【问题讨论】：

数据是否来自json响应？

【参考方案1】：

Working Plunker

要将ion-list 元素推到底部，您需要：

将视图封装设置为无 将ion-list 的容器设置为display: flex 和flex-direction: column 使用margin-top: auto 设置ion-list 元素的样式

无需更改您的 html 模板，here is a good answer 解释了如何将内容推送到容器底部。

组件装饰器

@Component(
  selector: 'page-home',
  templateUrl: 'pages/home/home.html',
  styles: [`
    .scroll-content 
      display: flex;
      flex-direction: column;
    
    .scroll-content ion-list 
      margin-top: auto;
      margin-bottom: 0;
    
  `],
  encapsulation: ViewEncapsulation.None
)

【参考方案2】：

@adriancarriger 的回答很好，但可以做一点小改进。由于您将新元素推到列表的底部，我想总是将内容滚动到底部会很好，以使新项目始终可见。只需添加几行代码即可轻松实现：

// First add ViewChild and Content imports
import  ViewChild, Component, ViewEncapsulation  from '@angular/core';
import  NavController, Content  from 'ionic-angular';

@Component(
  selector: 'page-home',
  templateUrl: 'pages/home/home.html',
  styles: [`
    .scroll-content 
      display: flex;
      flex-direction: column;
    
    .scroll-content ion-list 
      margin-top: auto;
      margin-bottom: 0;
    
  `],
  encapsulation: ViewEncapsulation.None
)
export class HomePage 
  @ViewChild(Content) content: Content; // <-- get a reference of the content

  count = 4; // for demo
  appName = 'Ionic App';
  array = [
     name: 'item-1' ,
     name: 'item-2' ,
     name: 'item-3' 
  ];

  constructor(private navController: NavController) 

  
  search() 
    console.log('searching...');
  
  add(number) 
    let itemNumber = this.count;
    this.array.push( name: 'item-' + itemNumber );
    this.scrollToBottom(); // <- when the new item is pushed, scroll to the bottom to show it
    this.count += number;
  

  scrollToBottom()
    // use the content's dimension to obtain the current height of the scroll
    let dimension = this.content.getContentDimensions();

    // scroll to it (you can also set the duration in ms by passing a third parameter to the scrollTo(x,y,duration) method.
    this.content.scrollTo(0, dimension.scrollHeight);
  

【讨论】：

太好了，谢谢！如何根据搜索栏输入进一步修改它以滚动到列表中的特定项目？

在键入（如自动完成）或单击搜索按钮时是否需要滚动到项目？

列表根据用户键入时的搜索栏输入自动过滤。用户可以单击列表项以将其副本保存到购物篮中。然后搜索栏会自动清除，列表会重新填充所有可能的项目。但是，此时我希望列表也自动向下滚动到刚刚单击的项目，这样用户就不会因为列表重新填充所有可能的项目而突然迷失方向。刚刚点击的项目应该位于搜索栏的正上方（我只能让它滚动，所以刚刚点击的项目位于屏幕顶部）。