使用mt-range实现一个数字随着滑动杆变化的效果

最近开发中有一项需求，需要实现数字随着滑竿移动的这样一个效果。

对于我来说，我喜欢用最少和最简单的代码来实现看似复杂的功能，所以在这里记录一下我的实现思路和方法，希望有更好的实现方法的小伙伴，可以多多交流~

先上效果图(录制GIF图失败，只能上静态图凑活看o(╥﹏╥)o)

1.实现思路：

使用UI框架：Vue+MintUI

通过获取滑竿上的值，将滑竿上的值按照最大值和最小值以及步长，进行均分，通过计算改变数值的偏移量来达到随着滑竿变动的效果。在这里我采用的是在watch中监听滑竿上绑定的数值的变化，来直接修改上面数字的偏移值，滑动效果非常的流畅快速。

我这里因为步长，最大值最小值是固定的，所以写死了，如果你想做成动态改变的，可以将最大值，最小值和步长用变量来表示，下面的计算中，换成相应的数值计算就可以了。

直接上代码：

<template> 
<div class="windspeed_choose">
      <div class="mode_title">
        选择数值
      </div>
      <div  class="wind_txt">
      <div id="wind_txt_value">{{WindValue}}</div>
      </div>
      <div class="mode_items">

        <div class="wind_auto">
          <img src="../../static/img/auto_mode.png">
        </div>
        <div class="wind_range">
          <mt-range
            v-model="WindValue"
            :min="0"
            :max="100"
            :step="1"
            :bar-height="6"
            @input="inputEvent()"
            @change="changeevent()"
          >
          </mt-range>
        </div>

      </div>
</template>

css:

<style scoped>
  .mode_items{width:100%;height:calc(100% - 50px);display:flex;overflow-x: hidden;}
  .wind_auto{height:100%;width:23px;margin-left: 41px;align-content: center;margin-right:10px;}
  .wind_auto > img{width:23px;height:23px;}
  .wind_range{height:100%;width:calc(100% - 65px);margin-right:41px;}
  .wind_txt{width:100%;height:auto;text-align: center;font-family: PingFangSC-Regular; font-size: 18px;  color: #666666;margin-bottom: 5px;   }
  #wind_txt_value{width:40px;transform: translateX(72px);}
</style>

js:


export default {
  name: 'ControllPage',
  data(){
   return {
      WindValue:65
   }
}，
methods:{
   inputEvent:function(){
      console.log("input事件触发啦，滑竿上的值为-----"+this.WindValue);
   },
   changeEvent:function(){
      console.log("change事件触发啦，滑动停止后的值为-----"+this.WindValue);
   }
},
watch:{
   WindValue(newvalue,oldvalue){
      let windage_wdth = document.getElementsByClassName('wind_range')[0].clientWidth;    
     //获取到下面滑竿所在div的宽度
      let ave = (windage_wdth-30)/100;  
     //将宽度减去上面显示数字div的宽度后，均分为100份，这里可以改为你自己的范围值，我这里是100，所以除数为100.数字div的宽度为40，但是经过调整后，改为30
      let left_value = parseFloat(72+ave*newValue).toFixed(0) ;  
     //在这里加上了初始偏移量，因为前面还有个图片，可以根据你的布局进行动态调整
 document.getElementById('wind_txt_value').style.transform='translateX('+left_value+'px)';
//调用CSS中的translateX进行动态偏移

      }
   }
}
}

实现效果就是上面那样啦，bingo~

使用mt-range实现一个数字随着滑动杆变化的效果

猜你喜欢