0

我想做这样的事情图片

所以为此我使用插件ngx-swiper-wrapper。我已经安装了它并在 module.ts 中添加了

    import { SwiperModule } from 'ngx-swiper-wrapper';
    import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
    
    const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
      observer: true,
      direction: 'horizontal',
      threshold: 50,
      spaceBetween: 5,
      slidesPerView: 1,
      centeredSlides: true
    };
    const SWIPER_CONFIG: SwiperConfigInterface = {
      direction: 'horizontal',
      slidesPerView: 'auto'
    };

 
  imports: [
    ...
    SwiperModule
  ],
     providers: [
        {
          provide: SWIPER_CONFIG,
          useValue: DEFAULT_SWIPER_CONFIG
        }

在 .html 我用过

<mat-list class="style-mat-list" style="padding: 3%;">
  <mat-list-item *ngFor="let item of typesOfShoes;">
    <swiper>
      <h4 mat-line style="font-weight: bold;">{{ item}}</h4>
      <div class="style-icon">
        <mat-slide-toggle></mat-slide-toggle>
      </div>
      <div class="style-icon">
        <button mat-raised-button color="primary">
          ADD NOTE
        </button>
      </div>
      <mat-divider></mat-divider>
    </swiper>
  </mat-list-item>
</mat-list>

我已经在这个演示中展示了它

我想在视图中显示包含项目和垫子滑块的列表。只有当我从右向左滑动时，我才想显示一个按钮Add note。当一个按钮在视图中时，我想从左向右滑动它。

请你能与我分享如何实现它的任何想法吗？

4

0 回答 0