关于前端: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…