vue移动端横向滑动,vue 滑动
这篇文章主要为大家详细介绍了某视频剪辑软件实现移动端原生小球滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现移动端原生小球滑块的具体代码，供大家参考，具体内容如下
效果
用到的一些事件
阻止默认事件：ev。防止默认ev。防止默认()；
获取宽度：getBoundingClientRect().宽度
点击位置在元素的位置：ev.changedTouches[0].pageX
模板
div id=应用程序
div class=slider
div class=line/div
div class=line ac/div
div class= box @ touch start= fn start /div
div class= box as @ touch start= fn start /div
/div
/div
/模板
射流研究…
脚本
导出默认值{
方法：{
fnStart(ev) {
//计算点击位置在元素的坐标
this.disX=ev.changedTouches[0].pageX-ev。目标。向左偏移；
//获取父节点
这个。parent=ev。目标。父节点；
//获取元素的宽
这个。ow=这个。父母。getboundingclientrect().宽度；
//计算除了元素的宽盒子还剩下多宽
这个。clienw=this。嗷-哦。目标。getboundingclientrect().宽度；
//获取左边小圆球
这个。lcircle=this。父母。儿童[2]；
//获取右边小圆球
这个。rcycle=this。父母。儿童[3]；
//获取变色条
这个。line=这个。父母。儿童[1]；
文档。ontouchmove=this。fnmove
文档。ontouchend=this。fnend
},
fnmove(ev) {
//计算移动的距离
this.ll=ev.changedTouches[0].pageX-这个。disx
//判断不能让小圆球到盒子外面
如果(这个。ll 0)这个。ll=0；
如果(这个。ll这个。clienw)这个。ll=这个。clienw
//右边线条
如果(ev。目标。类名。的索引( as )！=-1) {
这个。线。风格。宽度=这个。这个。父母。孩子们.向左偏移“px”；
//右边推动左边小圆球
//判断如果右边小球移动到左边小于左边小球获取的距离如果当前为0 加一个小圆球的宽他们就不会重叠
console.log(this.ll)
如果(这个。ll这个。lcircle。向左偏移30){
//如果this.ll大于左边小球的值当前this.ll-30就是左边小球左边的的值
这个。ind=this。ll-30；
console.log(this.ind)
//判断当前左边位置过等于0 就让他左边的位置等于0 就不会到盒子外面
if (this.ind=0) {
这个。ind=0；
}
//如果this.ll的值小于小圆球的宽两个圆就会重叠所以让右边圆的左边的值为30
如果(this.ll 30) {
this.ll=30
}
这个。线。风格。左=这个。ind“px”；
这个。lcircle。风格。左=这个。ind“px”；
}
}否则{
//左线条
//获取左边的距离
这个。线。风格。左=这个。ll‘px’；
//当前this.ll就是线条多出来的宽如果左边不动获取的值是300 this.ll是移动的距离
this.line.style.width=
这个。父母。孩子[3]。向左偏移-这个。ll‘px’；
//左边推动右边小圆球要把右边小球30 不然两个小球就会重合到一起
如果(这个。ll 30这个。循环。向左偏移){
这个。indx=这个。ll 30
if (this.indX this.clienw) {
这个。indx=这个。clienw
}
//判断当前移动的距离不能超过this.clienw-30如果超过就会重叠
if(this.llthis.clienw-30){
this.ll=this.clienw-30
}
这个。线。风格。左=这个。索引像素
这个。循环。风格。左=这个。索引像素
}
}
伊芙。目标。风格。左=这个。ll‘px’；
},
fnend() {
document.ontouchmove=null
document.ontouchend=null
},
},
};
/脚本
钢性铸铁样式
样式范围语言=少。滑块{
高度：30px
宽度：300像素
背景：# 999;
位置：相对；
边距：自动；方框{
宽度：30px
高度：30px
边界半径：50%;
背景：粉色；
位置：绝对；
}。box.as {
背景：蓝紫色；
右：0；
}
//线。行{
宽度：300px
高度：5px
背景：# eee
位置：绝对；
}
. line.ac {
背景：rgb(247，151，25)；
}
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。