slider在h5下的严重bug

[qicmsg]

相关平台

H5

浏览器版本: chrome 89 使用框架: React

复现步骤

当 slider 的min>0，max>100时，滑动时value值计算有问题。如：

<Slider step={10} min={60} max={120}></Slider>

期望结果

当第一次滑动时value=70

实际结果

第一次滑动value=10

环境信息

Taro CLI 2.2.13 environment info:
    System:
      OS: macOS 11.2.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 12.13.0 - /usr/local/bin/node
      npm: 6.12.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 2.2.16 => 2.2.16 
      @tarojs/components: ^2.2.16 => 2.2.16 
      @tarojs/components-qa: ^2.2.16 => 2.2.16 
      @tarojs/mini-runner: ^2.2.16 => 2.2.16 
      @tarojs/plugin-babel: ^2.2.16 => 2.2.16 
      @tarojs/plugin-sass: ^2.2.16 => 2.2.16 
      @tarojs/plugin-uglify: ^2.2.16 => 2.2.16 
      @tarojs/redux: ^2.2.16 => 2.2.16 
      @tarojs/redux-h5: ^2.2.16 => 2.2.16 
      @tarojs/router: ^2.2.16 => 2.2.16 
      @tarojs/taro: ^2.2.16 => 2.2.16 
      @tarojs/taro-alipay: ^2.2.16 => 2.2.16 
      @tarojs/taro-h5: ^2.2.16 => 2.2.16 
      @tarojs/taro-qq: ^2.2.16 => 2.2.16 
      @tarojs/taro-quickapp: ^2.2.16 => 2.2.16 
      @tarojs/taro-swan: ^2.2.16 => 2.2.16 
      @tarojs/taro-tt: ^2.2.16 => 2.2.16 
      @tarojs/taro-weapp: ^2.2.16 => 2.2.16 
      @tarojs/webpack-runner: ^2.2.16 => 2.2.16 
      eslint-config-taro: ^2.2.16 => 2.2.16 
      eslint-plugin-taro: ^2.2.16 => 2.2.16 
      nerv-devtools: ^1.5.7 => 1.5.7 
      nervjs: ^1.5.7 => 1.5.7 
      stylelint-config-taro-rn: ^2.2.16 => 2.2.16 
      stylelint-taro-rn: ^2.2.16 => 2.2.16 
      taro-ui: ^2.3.4 => 2.3.4

[qicmsg]

bug修复

1. 修改constructor方法

   const {value, max, min} = this.props;
   
   this.state = {
     value: value,
     controlled: typeof value !== 'undefined',
     totalWidth: 0,
     touching: false,
     ogX: 0,
     touchID: false,
     //percent: this.props.value ? parseInt(this.props.value / (this.props.max - this.props.min) * 100) : 0
     percent: value ? (value - min) / (max - min) * 100 : 0
   }

2. 修改componentWillReceiveProps方法

   componentWillReceiveProps(nextProps) {
   const {value, max, min} = nextProps;
   if (this.state.controlled) {
     if (
       nextProps.value <= this.props.max &&
       nextProps.value >= this.props.min
     ) {
       //let percent = parseInt(nextProps.value / (this.props.max - this.props.min) * 100);
       let percent = (value - min) / (max - min) * 100;
       this.setState({value: value, percent})
     }
   }
   }

3. 修改countValue方法

   countValue(percent = this.state.percent, min = this.props.min, max = this.props.max) {
   let value = 0
   
   if (percent === 100) {
     value = max
   } else if (percent === 0) {
     value = min
   } else {
     value = Math.round(min + (max - min) * percent / 100);
   }
   return value
   }

4. 修改handleTouchMove方法

   handleTouchMove(e) {
   let {onChanging, max, min, step} = this.props
   if (!this.state.touching || this.props.disabled) return
   if (e.targetTouches[0].identifier !== this.state.touchId) return
   
   // 阻止默认事件
   e.preventDefault()
   
   const pageX = e.targetTouches[0].pageX
   const diffX = pageX - this.state.ogX
   
   let percent = parseInt(diffX / this.state.totalWidth * 100) + this.state.ogPercent
   percent = percent < 0 ? 0 : percent > 100 ? 100 : percent
   
   // 计算一步的百分比比率
   let p = 100 / ((max - min) / step)
   
   // 计算步数
   let _step = parseInt((percent + (p / 2)) / p)
   percent = _step * p;
   
   const value = this.countValue(percent)
   
   if (value === this.state.value) return
   
   this.setState(
     {
       percent,
       value
     },
     () => {
       Object.defineProperty(e, 'detail', {
         enumerable: true,
         value: {
           detail: e.detail,
           value: this.state.value
         }
       })
       if (onChanging) onChanging(e)
     }
   )
   }

   官方看到自己修改一下bug吧。

[luckyadam]

直接提个 pr