vue实现滑块slider（赋源码）
因为项⽬⽤到滑块，只要⼀处使⽤到看了第三⽅库觉得没必要引⼊导致项⽬太臃肿：
先上代码：
<template>
<div class="slider"ref="mySlider">
<div class="left-btn":class="{active:myPosition.isBtn==2}"></div>
<div class="propo"></div>
<div class="propo-bg"></div>
<div class="right-btn":class="{active:myPosition.isBtn==1}"></div>
</div>
</template>
<script type="text/javascript">
export default {
name: 'slider',
props:{
"valueFun":{
type:Function,
required: true,
},
"max":{
type:Number,
default:100
},
"min":{
type:Number,
default:0
}
},
data(){
return{
myPosition:{
left:0,
right:0,
now:0,
htmlborderisBtn:0,
propoWidth:0
},
myDefault:null
}
},
methods:{
},
mounted(){
//滑块
let that = this
let mySlider = this.$Slider
let propo = mySlider.children[1]
let rightBtn = mySlider.children[3]
let leftBtn = mySlider.children[0]
let myWidth = 0
const elementLeft = (e) => { //计算x坐标
var offset = e.offsetLeft;
if(e.offsetParent != null) offset += elementLeft(e.offsetParent);
return offset;
}
const myCount = () => { //计算滑动
Position.right&Position.left){ //判断滑动范围
propo.style.width = Position.propoWidth+'%'
propo.style.left = Position.left + '%'
this.valueFun(Position.left),Position.right),Position.propoWidth))
}else Position.right&Position.left){
propo.style.width = Position.propoWidth+'%'
propo.style.left = Position.right+'%'
this.valueFun(Position.right),Position.left),Position.propoWidth))
}
}
if(this.max > this.min){
propo.style.left = Position.left + '%'
}else{
propo.style.left = Position.right + '%'
}
propo.style.width = Position.propoWidth+'%'
leftBtn.style.left = Position.right + '%'
rightBtn.style.left = Position.left + '%'
this.Position.Position.Position.propoWidth)
}
let mySliderX = elementLeft(mySlider) //滑动块x坐标
mySlider.addEventListener('touchmove',(e)=>{ //屏幕滑动事件
let pageX = e.touches[0].pageX-mySliderX //获取滑动x坐标
myWidth = (pageX/mySlider.offsetWidth)*100//计算百分⽐
if(myWidth>100){ //判断不超出范围
myWidth=100
}else if(myWidth<0){
myWidth=0
}
Position.isBtn == 1){//判断焦点
rightBtn.style.left = myWidth+'%'
}else Position.isBtn == 2){
leftBtn.style.left = myWidth+'%'
}
myCount()
e.preventDefault()
})
mySlider.addEventListener('touchstart',(e)=>{//屏幕触摸事件
let touchX = e.touches[0].pageX-mySliderX
let btnWidth = (leftBtn.offsetWidth/mySlider.offsetWidth)/2*100//计算按钮宽度
mySliderX = elementLeft(mySlider) //滑动块x坐标
w <= Position.left+btnWidth&&w >= Position.left-btnWidth){ //计算区间获取焦点Position.isBtn = 1
}else w <= Position.right+btnWidth&&w >= Position.right-btnWidth){ Position.isBtn = 2
}else{
}
})
})
},
watch:{
min(New,old){
},
max(New,old){
}
}
}
</script>
<style lang="scss">
.slider{
width: 100%;
position:relative;
height: 0.5rem;
.
left-btn,.right-btn{
position: absolute;
top: -0.34rem;
transform:translate(-50%,0);
&:before{
content: "";
display: block;
width: 0;
height: 0.4rem;
border-left: 0.17rem solid transparent;                    border-right: 0.17rem solid transparent;                    border-bottom: 0.17rem solid #B6B6B6;                }
&:after{
content: "";
display: block;
height: 0.30rem;
width: 0.34rem;
background:#B6B6B6;
border-bottom-left-radius: 0.1rem;
border-bottom-right-radius: 0.1rem;
}
}
.propo{
width: 0%;
height: 0.04rem;
background:#FFD00D;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.propo-bg{
background:#B6B6B6;
border-radius: 0.04rem;
height: 0.04rem;
width:100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.active{
&:before{
border-bottom-color:#FF8C30
}
&:after{
&:after{
background:#FF8C30;
}
}
}
</style>
实现思路：
⾸先通过$refs获取dom节点
通过touchstart事件获取触摸的x坐标 判断按钮焦点
通过touchmove判断之前的焦点并获取滑动距离
然后计算滑动距离（滑动的x坐标减掉最⽗级节点的x坐标，注：最⽗级节点是动态改变的 所以得动态获取）调⽤⽅法：
<slider :value-fun="Val":min="0":max="100"></slider>
样式：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。