Question

我有一个带有标记的媒体播放器。目前，标记看起来像这样

以下是一些有用的代码部分：

return data.map((item, i) => {
      // console.log('item: ',item);
      let display = 'block';

      let left = null;
      let position = (item.position / 1000) * ratio;
      // console.log(position);
      // check if low duration or position of point is bigger than duration of media
      if (duration >= 1) {
        if (position <= 100) {
          left = position  + '%';
        } else {
          // if outside if bar then hide element
          display = 'none';
        }
      } else {
        display = 'none';
      }



let styleLine = {
        display: display,
        // position: 'absolute',
        width: left,
        height: '3px',
        paddingLeft: left,
        backgroundColor: item.lineColor,
      }
      //create style for point
      let stylePoint = {
        height: '9px',
        width: '9px',
        backgroundColor: item.color,
        display: display,
        position: 'absolute',
        cursor: 'pointer',
        borderRadius: '25px',
        marginTop: '-2px',
        marginLeft: '-2px',
        //zIndex: '15',
        left: left,
      };

      return (
        // <span key={i} style={stylePoint} onClick={this.handleClick}></span>
        <span key={i} >
          <span style={styleLine}></span>
          <span style={stylePoint} onClick={this.handleClick}></span>
        </span>
      )
    })
  };

我需要的是一条彩色线条，该线条以第一种颜色开始，直到红点，然后以第二种颜色开始，而不是以相同的开始处出现两条不同的线。我尝试过使用z-index，但这没有用。什么是正确的解决方案？

Answer 1

是否无法为每种颜色创建不同的线并将其位置设置为绝对值？因此，当完成一项操作时，您可以使用css left属性从该点开始另一项操作。

将几行合并为一

1 个答案: