javascript 为移动的设备启用触摸拖动或在Angular 中刷新猫头鹰旋转木马

ulydmbyx 于 2022-11-27 发布在 Java

关注(0)|答案(2)|浏览(122)

我正在尝试仅为移动的设备启用touchdrag和mousedrag。

customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navText: ['', ''],
    items: 4,
    responsive: {
      0: {
        touchDrag: true,
        mouseDrag: true
      },
      768: {
        touchDrag: false,
        mouseDrag: false
      }
    },
    nav: true
  }

我读到过，carousel应该在调整大小时刷新以进行更改。

$('owl-carousel').trigger('refresh.owl.carousel')

但是我想不使用jquery，因为我使用了owl-carousel-o标签和owloptions。如果有其他的方法，也请建议。

JavaScript

来源：https://stackoverflow.com/questions/74535821/enabling-touchdrag-for-mobile-devices-or-refreshing-owl-carousel-in-angular

2条答案

按热度按时间

8aqjt8rx1#

文档已经为您提供了解决方案。
在这里我选择了“initialized”事件来改变选项。尽管名字是这样，但它似乎触发了不止一次。所以我在那里放了一个标志，让它只运行一次。下面是Angular 14的工作演示链接。
https://stackblitz.com/edit/angular-ivy-uznbfk?file=src/app/hello.component.ts

赞(0）回复(0）举报 2022-11-27

lbsnaicq2#

当屏幕调整大小时，我使用了hostlistener，并分配了其中的值进行更改。它现在工作正常。

@HostListener('window:resize', ['$event'])

  checkScreenSize(event?) {

    this.isDesktop = window.innerWidth >= 768 ? true : false;
    if (this.isDesktop) {
      this.customOptions.touchDrag = false;
      this.customOptions.mouseDrag = false;
    }
    else {
      this.customOptions.touchDrag = true;
      this.customOptions.mouseDrag = true;
    }

  }

  customOptions: OwlOptions = {
    margin: 10,
    stagePadding: 10,
    loop: false,
    dots: false,
    navSpeed: 600,
    navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>", "<i class='fa fa-angle-right' aria-hidden='true'></i>"],
    nav: true,
    responsive: {
      0: {
        items: 4
      }
    }
  }

赞(0）回复(0）举报 2022-11-27

我来回答

javascript 为移动的设备启用触摸拖动或在Angular 中刷新猫头鹰旋转木马

2条答案

相关问题

热门标签

最新问答