122 lines
2.5 KiB
Vue
122 lines
2.5 KiB
Vue
<template>
|
|
<view class="progress-container">
|
|
<view class="progress-container2" id="progress" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
|
|
<view class="progress-box"><progress :percent="percent" activeColor="#000" backgroundColor="#1c1c1c" stroke-width="3" /></view>
|
|
<view class="ball-box" :class="{ bigger: isTouch, shadow: isTouch }" :style="{ left: `${percent}%` }"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
total: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
left: 0, //进度条最左侧位置
|
|
right: 0, //进度条最右侧位置
|
|
isTouch: false,
|
|
// touchTimer: null, //用于触摸节流
|
|
percent: 0
|
|
};
|
|
},
|
|
watch: {
|
|
index() {
|
|
this.percent = (this.index / this.total) * 100;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.percent = (this.index / this.total) * 100;
|
|
this.getLocation();
|
|
},
|
|
methods: {
|
|
getLocation() {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query
|
|
.select('#progress')
|
|
.boundingClientRect(data => {
|
|
this.left = data.left;
|
|
this.right = data.right;
|
|
})
|
|
.exec();
|
|
},
|
|
|
|
touchstart() {
|
|
this.isTouch = true;
|
|
this.$emit('progressStart');
|
|
},
|
|
|
|
touchend(e) {
|
|
this.isTouch = false;
|
|
let index = this.calcIndex(e.changedTouches[0].clientX);
|
|
this.$emit('progressEnd', index);
|
|
this.percent = (index / this.total) * 100;
|
|
},
|
|
|
|
touchmove(e) {
|
|
// if (!this.touchTimer) {
|
|
let index = this.calcIndex(e.touches[0].clientX);
|
|
this.$emit('indexChange', index);
|
|
this.percent = (index / this.total) * 100;
|
|
// this.touchTimer = setTimeout(() => {
|
|
// this.touchTimer = null;
|
|
// }, 100)
|
|
// }
|
|
},
|
|
|
|
/**
|
|
* 输入位置计算index
|
|
**/
|
|
calcIndex(px) {
|
|
let single = (this.right - this.left) / this.total;
|
|
let index = Math.round((px - this.left) / single);
|
|
index = index < 0 ? 0 : index;
|
|
index = index > this.total ? this.total : index;
|
|
return index;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.progress-container {
|
|
padding: 0 10px;
|
|
width: 100%;
|
|
height: 100%;
|
|
.progress-container2 {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
.progress-box {
|
|
width: 100%;
|
|
}
|
|
.ball-box {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #000;
|
|
transform: translateX(-50%);
|
|
}
|
|
.shadow {
|
|
box-shadow: 0px 0px 1px 5px rgba(#888, 0.4);
|
|
}
|
|
.bigger {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|