vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊

更新時(shí)間：2022年03月08日 09:12:56 作者：至_臻

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊的具體代碼，供大家參考，具體內(nèi)容如下

效果

用到的一些事件

阻止默認(rèn)事件：ev.preventDefault && ev.preventDefault();

獲取寬度：getBoundingClientRect().width

點(diǎn)擊位置在元素的位置：ev.changedTouches[0].pageX

<template>
? <div id="app">
? ? <div class="slider">
? ? ? <div class="line"></div>
? ? ? <div class="line ac"></div>
? ? ? <div class="box" @touchstart="fnStart"></div>
? ? ? <div class="box as" @touchstart="fnStart"></div>
? ? </div>
? </div>
</template>

js

<script>
export default {
? methods: {
? ? fnStart(ev) {
? ? ? // 計(jì)算點(diǎn)擊位置在元素的坐標(biāo)
? ? ? this.disX = ev.changedTouches[0].pageX - ev.target.offsetLeft;
? ? ? // 獲取父節(jié)點(diǎn)
? ? ? this.parent = ev.target.parentNode;
? ? ? // 獲取元素的寬
? ? ? this.ow = this.parent.getBoundingClientRect().width;
? ? ? // 計(jì)算除了元素的寬盒子還剩下多寬
? ? ? this.clienw = this.ow - ev.target.getBoundingClientRect().width;
?
? ? ? // 獲取左邊小圓球
? ? ? this.lcircle = this.parent.children[2];
? ? ? // 獲取右邊小圓球
? ? ? this.rcircle = this.parent.children[3];
?
? ? ? // 獲取變色條
? ? ? this.line = this.parent.children[1];
?
? ? ? document.ontouchmove = this.fnmove;
? ? ? document.ontouchend = this.fnend;
? ? },
? ? fnmove(ev) {
? ? ? // 計(jì)算移動(dòng)的距離
? ? ? this.ll = ev.changedTouches[0].pageX - this.disX;
? ? ? // 判斷不能讓小圓球到盒子外面
? ? ? if (this.ll < 0) this.ll = 0;
? ? ? if (this.ll > this.clienw) this.ll = this.clienw;
? ? ? // 右邊線條
? ? ? if (ev.target.className.indexOf("as") != -1) {
? ? ? ? this.line.style.width =this.ll - this.parent.children[2].offsetLeft + "px";
? ? ? ? // 右邊推動(dòng)左邊小圓球
? ? ? ? // 判斷如果右邊小球移動(dòng)到左邊小于左邊小球offsetLeft的距離 如果當(dāng)前為0 加一個(gè)小圓球的寬他們就不會重疊
? ? ? ? console.log(this.ll)
? ? ? ? if (this.ll < this.lcircle.offsetLeft + 30) {
? ? ? ? ? // 如果this.ll大于左邊小球的值 當(dāng)前this.ll-30就是左邊小球left的值
? ? ? ? ? this.ind = this.ll - 30;
? ? ? ? ??
? ? ? ? ? console.log(this.ind)
? ? ? ? ? // 判斷當(dāng)前左邊位置過等于0 就讓他左邊的位置等于0 就不會到盒子外面
? ? ? ? ? if (this.ind <= 0) {
? ? ? ? ? ? this.ind = 0;
? ? ? ? ? }
? ? ? ? ? // 如果this.ll的值小于小圓球的寬 兩個(gè)圓就會重疊 ?所以讓右邊圓的left值為30
? ? ? ? ? if (this.ll < 30) {
? ? ? ? ? ? this.ll = 30;
? ? ? ? ? }
?
? ? ? ? ? this.line.style.left = this.ind + "px";
? ? ? ? ? this.lcircle.style.left = this.ind + "px";
? ? ? ? }
? ? ? } else {
? ? ? ? // 左線條
? ? ? ? // 獲取左邊的距離
? ? ? ? this.line.style.left = this.ll + "px";
? ? ? ? // 當(dāng)前this.ll就是line多出來的寬 ? 如果左邊不動(dòng) offsetleft的值是300 ? this.ll是移動(dòng)的距離
? ? ? ? this.line.style.width =
? ? ? ? ? this.parent.children[3].offsetLeft - this.ll + "px";
? ? ? ? // 左邊推動(dòng)右邊小圓球 ?要把右邊小球+30 不然兩個(gè)小球就會重合到一起
? ? ? ? if (this.ll + 30 > this.rcircle.offsetLeft) {
? ? ? ? ? this.indX = this.ll + 30;
?
? ? ? ? ? if (this.indX > this.clienw) {
? ? ? ? ? ? this.indX = this.clienw;
? ? ? ? ? }
?
? ? ? ? ? ? ? // 判斷當(dāng)前移動(dòng)的距離不能超過 this.clienw-30如果超過就會重疊
? ? ? ? ? if(this.ll>this.clienw-30){
? ? ? ? ? ? this.ll=this.clienw-30
? ? ? ? ? }
?
? ? ? ? ? this.line.style.left=this.indX+'px'
? ? ? ? ? this.rcircle.style.left=this.indX+'px'
? ? ? ? }
? ? ? }
?
? ? ? ev.target.style.left = this.ll + "px";
? ? },
? ? fnend() {
? ? ? document.ontouchmove = null;
? ? ? document.ontouchend = null;
? ? },
? },
};
</script>

css樣式

<style scoped lang="less">
.slider {
? height: 30px;
? width: 300px;
? background: #999;
? position: relative;
? margin: auto;
? .box {
? ? width: 30px;
? ? height: 30px;
? ? border-radius: 50%;
? ? background: pink;
? ? position: absolute;
? }
? .box.as {
? ? background: blueviolet;
? ? right: 0;
? }
? // 線條
? .line {
? ? width: 300px;
? ? height: 5px;
? ? background: #eee;
? ? position: absolute;
? }
? .line.ac {
? ? background: rgb(247, 151, 25);
? }
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: