Question

我需要在React Media Player中制作多色进度条。我的意思是，当我单击视频上的“播放”时，进度条必须在特定点之后更改颜色。目前只有一种颜色，样式如下

@include -range-track(webkit) {
    background: {
      image: linear-gradient($track-lower-color, $track-lower-color);
      size: inherit;
      repeat: no-repeat;
    }
  }

有人可以帮助我使进度条变得丰富多彩吗？

Answer 1

如果在进度条宽度变化时保持设置状态，则每次都会调用渲染功能，从而可以为每个百分比范围提供自定义颜色。

class ColorBar extends React.Component {
  state = {
    width: 10
  }

   colorSwitch = (width) => {
    if(width >= 10 && width < 20) {
        return 'red'
    }
    if(width >= 20 && width < 50) {
        return 'orange'
    }
    if(width >= 50 && width < 100) {
        return 'yellow'
    }
    return 'green'; // default for < 10 and >= 100 
  }

  getStyle = () => {
    return {
        backgroundColor: this.colorSwitch(this.state.width),
      width: this.state.width,
      height:50,
    }
  }

  changeSize = () => this.setState({ width: this.state.width+10})

  render() {
    return <div>
            <div style={this.getStyle()} />
            <button onClick={this.changeSize}>Change size </button>
          </div>
  }
}

ReactDOM.render(
  <ColorBar />,
  document.getElementById('container')
);

https://jsfiddle.net/51fyvzob/

React Media Player多色进度条

1 个答案: