乐趣区

关于前端:JS-实现-Angular-slider-组件

需要形容

  1. 需要:依据传入的动静数组生成一个节点数为数组长度的 slider 组件。要求节点间接长度统一,然而显示的值为传入数组的值。
  2. 示例:
    传入值为 [5], 因为只有一个值,slider 无奈拖动,显示如下
    传入值为[5,10,20,30,40,50,55],数值之间差值不肯定相等,显示如下
  3. 实现逻辑:
    UI:
    先画一条线作为滑动条,再依据传入数组长度来动静生成相应节点数, 通过 滑动条线的长度÷数组长度 来动静生成节点之间宽度。把生成的点笼罩在线下面,最初进行分段。

Demo

意外解决

问题:

在实现过程中,有遇到一个问题:在父组件页面还没有加载完的时候,曾经在执行 slider 组件的 initDynamicMargin() 办法。此时,无奈拿到 slider 宽度,来计算相应的dotMargin

解决办法:

通过 Promise 来写一个 waitElement() 办法,等页面 slider 加载实现之后,再去计算节点之间的宽度。

代码实现如下:

  private waitElement(selector: string) {return new Promise<void>((resolve) => {if (document.querySelector(selector)) {resolve();
      }
      const observer = new MutationObserver((mutations) => {if (document.querySelector(selector)) {resolve();
          observer.disconnect();}
      });

      observer.observe(document.body, {
        childList: true,
        subtree: true,
      });
    });
  }

    ngAfterViewInit() {
    // Fix issue: Calculate dotmargin before loaded
    this.waitElement('#container').then(() => {this.initDynamicMargin();
    });
  }

Github 地址

https://github.com/emonZan/an…

退出移动版