记录：微信小程序半圆滑块（基于react taro实现）

 

1、画两个半圆 一个旋转180°至不可见

render() {
  
    let orignAngle = this.orignAngle,
      Longtouch = this.state.Longtouch
    let Angle = `transform: rotate(${orignAngle}deg);transition: all ${Longtouch ? ' 0.2s' : ' 0.5s'}`
    return (
      <View className="slider" onTouchEnd={() => this.touchEnd()} onTouchMove={this.touchMove}  >
        <View className="activeSlider-set">
          <View className="activeSlider" style={Angle}>
          {/* <View className="bgcBorder borderLeft activeColor"></View>
          <View className="bgcBorder borderRight activeColor"></View> */}
          </View>
        </View>
        <View className="orign" id="orign">
          <View className="long" style={Angle}>
            <View className="circle shadow" onTouchStart={this.handleLongPress}></View>
          </View>
        </View>
        <View className="sliderBgc">
          {/* <View className="bgcBorder borderLeft BGCCOLOR"></View>
          <View className="bgcBorder borderRight BGCCOLOR"></View> */}
        </View>

        <View className="flexCenter btn_air_bar">
          <View className="btn_air " onClick={() => this.lose()}>-</View>
          <View className="val">
            <View className="val_text">{this.props.val}</View>
            <View className='monad'>℃</View>
          </View>
          <View className="btn_air " onClick={() => this.add()}>+</View>

        </View>
      </View>
    )
  }

css

$color-brand: #12A5FF;
$borderColor:#DCDCDC;                 
$sliderWidth:20px;
$long:168px;
.bgcBorder{
  width: $sliderWidth;
  height: $sliderWidth;
 
  position: absolute;
  border-radius: 50%;
}
.BGCCOLOR{
  background-color: $borderColor;
}
.activeColor{
  background-color: $color-brand;
}
.borderLeft{
  bottom: -($sliderWidth/2);
  left: -($sliderWidth);
}
.borderRight{
  bottom: -($sliderWidth/2);
  right: -($sliderWidth);
}
.slider {
  width: ($long+$sliderWidth)*2;
    height: $long+$sliderWidth;
  // overflow: hidden;
  margin: 134px auto;
  position: relative;
  padding-bottom: $sliderWidth/2;
  .sliderBgc {
    width: $long*2;
    height: $long;
    position: absolute;
    bottom: 0;
    left: 0;
    border: $sliderWidth solid;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-color: $borderColor;
    border-bottom: none;
   
  }


  .activeSlider-set{
    position: absolute;
    width: ($long+$sliderWidth)*2;
    height: $long+$sliderWidth;
    left: 0;
    bottom: 0;
    z-index: 2;
    
    overflow: hidden;
    .activeSlider {
      bottom: 0;
      left: 0;
      width: $long*2;
      height: $long;
      border: $sliderWidth solid;
      border-color: $color-brand !important;
      border-radius: 50% 50% 0 0/100% 100% 0 0;
      border-bottom: none;
      transform: rotate(-100deg);
      transform-origin: $long+$sliderWidth $long+$sliderWidth;
      
    }
  }
  .orign {
    width: 0;
    height: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    left: 50%;
    z-index: 11;
    transform: translateX(50%);
  }

  .long {
    width: $long+$sliderWidth/2;
    height:0;
    z-index: 9999;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    .circle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(50%, -50%);
      background-color: #fff;
      z-index: 999;
    }
  }
}

.btn_air_bar{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}

根据值 计算角度 

get orignAngle (){

   return this.getAngleByVal(this.props.val)

  }

 // 根据值设置角度

  getAngleByVal(item) {

    return (item - 16) * 180 / 16 - 180

  }

  // 根据当前角度设置值(16：因为做的是空调的温度滑块16-32 所以这里是直接写死的16)

  setValByAngle(orignAngle) {

    if (orignAngle >= 0) {

      let angle = Math.abs(orignAngle - 180)

      let val = Number(((180 - angle) / 180 * 16).toFixed()) + 16

      this.props.setVal(val)

    }

  }

// 初次触摸

  handleLongPress=(e)=> {

    var Longtouch = this.state.Longtouch

    if (!Longtouch) {

      let lng = e.changedTouches[0]

      let targetOrign = {

        x2: lng.pageX,

        y2: lng.pageY

      }

      this.setState({

        Longtouch: true,

        targetOrign: targetOrign,

      })

      Taro.createSelectorQuery().select('#orign').boundingClientRect((res) => {

        console.log(res)

        let orign = {

          x1: res.left,

          y1: res.top,

        }

        let d = { ...orign, ...targetOrign }

        let orignAngle = getAngle(d)

        this.setValByAngle(orignAngle)

        this.setState({

          orign: orign,

        })



      }).exec()

    }

  }



  touchMove=(e)=> {

    var Longtouch = this.state.Longtouch

    if (Longtouch) {

      if (timer) clearTimeout(timer)

      timer = setTimeout(() => {

        let lng = e.changedTouches[0]

        let targetOrign = {

          x2: lng.pageX,

          y2: lng.pageY

        }

        let orign = this.state.orign

        let d = { ...orign, ...targetOrign }

        let orignAngle = getAngle(d)

        this.setValByAngle(orignAngle)

      }, 5);

    }



  }

  touchEnd(e) {

    this.setState({

      Longtouch: false

    })

  }