Блог

Главная - Вопросы по программированию - Угловая виртуальная прокрутка с динамической переменной высотой / шириной?

Угловая виртуальная прокрутка с динамической переменной высотой / шириной?

#javascript #angular #angular-material #virtualscroll

#javascript #угловая #angular-материал #virtualscroll

Вопрос:

Я ищу пакет виртуальной прокрутки angular со следующей функциональностью: 1) Горизонтальная виртуальная прокрутка 2) Ширина и высота контейнера изменчивы. 3) Ширина элементов устанавливается в процентах от ширины контейнера. 4) Элементы могут быть свернуты во время рендеринга.

Angular cdk в настоящее время работает с фиксированным размером элементов для высоты и ширины …. вот пример того, как это должно быть отображено:

 .parent {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px;
}
.child {
  width: 33.333%;
  height: 100%;
}
.child.mini {
  width: 40px;
}  
 <div class="parent">
  <div class="child" *ngFor="let item of items" [class.mini]="item.isMini">
    <button (click)="item.isMini = !item.isMini">Minimize Me!</button>
    {{item.name}}
  </div>
</div>

Какие-либо рекомендации?

Комментарии:

1. Есть решение? У меня такая же «проблема»

2. В итоге я использовал ngx-scroller. Единственное, что он не поддерживает, это ltr.

3. Вы имеете в виду rtl? Имеет ли это какой-либо эффект, когда список ориентирован вертикально?

4. Я имел в виду rtl. Я не думаю, что это должно повлиять на вертикальный список

Ответ №1:

Команда Angular работает над autosize директивой, которая позволяет прокручивать элементы разного размера.

Вы можете увидеть пример использования @angular/cdk-experimental здесь .
Имейте в виду, что это ЭКСПЕРИМЕНТАЛЬНО и на данный момент не рекомендуется для производственного использования, но это дает вам ощущение, и если вам это действительно нужно, это может помочь.

Кроме того, проверьте проблему с github

Ответ №2:

Вы можете попробовать ngx-ui-scroll. Говоря о ваших требованиях, он поддерживает

Не уверен в %-базовых размерах, я полагаю, вам придется пересмотреть шаблоны в вашем приложении. Создание шаблонов и поток данных… Надеюсь, это поможет.

Ответ №3:

Компонент ag-virtual-scroll поддерживает виртуальную прокрутку с разной высотой строки, но прокрутка работает только по вертикали.

NPM:https://www.npmjs.com/package/ag-virtual-scroll

ДЕМОНСТРАЦИОННАЯ СТРАНИЦА:https://ericferreira1992.github.io/ag-virtual-scroll / (второй пример)

Ответ №4:

Если вы не хотите autosize директиву, как упоминалось ранее,

Вот альтернативный способ:

Я решил проблему, динамически передавая значение height:

 <cdk-virtual-scroll-viewport #scrollViewport 
[itemSize]="itemSize" [style.height.px]="viewPortHeight">
</cdk-virtual-scroll-viewport>

Обратите внимание, что: мой компонент viewport был помещен в <ng-template> ;

itemSize и viewPortHeight являются переменными, определенными в контексте.