WBXprogress组件更加完善版
优化了滑动的方式的计算，兼容了默认滑块及自定义滑块，相对于上个版本都新增了啥，我也忘了，反正就比上一个自由度更高就对了
再提一嘴，本文档是基于微博语法开发，所以标签需要修改，有些方法需要修改，但是不难都能看懂哪有问题
下面是使用部分
<template>
<wbx-view style="height: 100vh;background-color: black;">
<wbx-view style="margin-top: 40px;">
<WBXprogress style="background-color: rebeccapurple; width: 300px;height:100px;display: flex;justify-content:center; margin-left: 50px;color:red;" :radiusNum="5" :ProgressHeightOriginal="5" @progressChange="move" :value="30">
<template slot="round">
<wbx-view style="width: 10px;height: 30px;background-color:yellow;border-radius: 10px;"></wbx-view>
</template>
</WBXprogress>
</wbx-view>
</wbx-view>
</template>
<script>
/**
* @type WBXAppOption
*/
import WBXprogress from "../../commpents/WBXprogress/index.vue";
const pageOptions = {
data() {
return {
};
},
computed:{
},
methods: {
move(e){
// console.log(e)
}
},
components: {
WBXprogress,
},
wbox: {
onLoad() { },
onShow() {
// 页面显示/切入前台时触发
},
onHide() {
// 页面隐藏时触发
},
onUnload() {
// 页面退出时触发
},
},
mounted() { },
};
export default pageOptions;
</script>
<style></style>
下面是组件内部
<template>
<wbx-view ref="styleObj" @touchend~stop="handleTouchFn" @touchmove~stop="handleTouchMoveFn" @touchstart~stop="touchstartFn">
<wbx-view :style="{ position: 'relative', display: 'flex', justifyContent: 'center', width: videoProgressWidth + 'px', height: sliderHeight + 'px', backgroundColor: 'pink' }">
<wbx-view :style="{ position: 'absolute', transition: 'all 0.3s linear', height: ProgressHeight + 'px', borderRadius: radiusNum + 'px' }">
<wbx-view :style="{ width: videoProgressWidth + 'px', height: boxHeight + 'px', backgroundColor: progressBackgroundColor, transition: 'all 0.3s linear' }"></wbx-view>
<wbx-view :style="{ width: ProgressWidth + 'px', height: boxHeight + 'px', backgroundColor: progressColor, position: 'absolute', top: 0, }"></wbx-view>
</wbx-view>
<!-- 新增的滑块 -->
<wbx-view ref="roundSolt" v-show="false" >
<slot name="round"></slot>
</wbx-view>
<wbx-view v-if="touchStart === 'move'&&isUseRoundSlot" :style="sliderStyle">
</wbx-view>
</wbx-view>
</wbx-view>
</template>
<script>
const pageOptions = {
data() {
return {
boxProgressWidth: 0, // 整体进度条的宽度
boxHeight: 0, // 整体进度条的高度
ProgressHeight: 0, // 进度条高度
ProgressWidth: 0, // 进度条移动的宽度
marginLeftNum: 0, // 距离左边的距离
percent: 0, // 进度条移动的距离
videoProgressWidth: 0, // 进度条宽度
progressColor: '', // 进度条选中颜色
percentValue: 0, // 显示的值百分比
radiusNum: 0, // 圆角
lastX: 0, // 记录上一次的X坐标
// 滑块的属性
isShowSlider:false,
sliderWidth: 5, // 滑块宽度
sliderHeight: 10, // 滑块高度
borderRadius:0,
sliderColor: '#000', // 滑块颜色
sliderOffsetY: 5, // 滑块向上的偏移量，确保滑块与进度条对齐
touchStart: '', // 触摸的状态
};
},
props: {
progressBackgroundColor: {
type: String,
default: '#e6e6e6'
},
value: {
type: Number,
default: 0
},
ProgressHeightOriginal: {
type: Number,
default: 10
},
radiusNum: {
type: Number,
default: 0
}
},
mounted() {
this.ProgressStyleObject = this.$refs.styleObj.styleObject;
this.boxHeight = parseFloat(this.ProgressStyleObject.height) ? parseFloat(this.ProgressStyleObject.height) : 10;
this.videoProgressWidth = parseFloat(this.ProgressStyleObject.width) ? parseFloat(this.ProgressStyleObject.width) : 300;
this.marginLeftNum = parseFloat(this.ProgressStyleObject.marginLeft) ? parseFloat(this.ProgressStyleObject.marginLeft) : 0;
this.progressColor = this.ProgressStyleObject.color ? this.ProgressStyleObject.color : '#bfbfbf';
if (this.value > 0) {
this.ProgressWidth = ((this.videoProgressWidth) / 100) * this.value;
}
this.ProgressHeight = this.ProgressHeightOriginal / 2;
// 插槽的格式
if(this.isUseRoundSlot){
this.roundSoltStyle= this.$refs.roundSolt.childNodes[0].styleObject
console.log(this.roundSoltStyle,'格式')
this.sliderWidth= parseFloat(this.roundSoltStyle.width)
this.sliderHeight= parseFloat(this.roundSoltStyle.height)
this.sliderColor=this.roundSoltStyle.backgroundColor||'c0c0c0'
this.borderRadius=parseFloat(this.roundSoltStyle.borderRadius||0)
}
},
methods: {
a() {},
handleTouchMoveFn(e) {
this.handleTouchMove(e);
},
handleTouchFn(e) {
this.touchStart = 'end';
this.ProgressHeight = this.ProgressHeightOriginal / 2;
},
touchstartFn(e) {
this.lastX = e.touches[0].clientX;
},
// 点击事件
handleTouch(e) {
this.ProgressHeight = this.ProgressHeightOriginal / 2;
},
handleTouchMove(e) {
this.touchStart = 'move';
this.ProgressHeight = this.ProgressHeightOriginal;
const currentX = e.touches[0].clientX;
const deltaX = currentX - this.lastX;
this.lastX = currentX;
let newProgressWidth = this.ProgressWidth + deltaX;
if (newProgressWidth < 0) {
newProgressWidth = 0;
} else if (newProgressWidth > this.videoProgressWidth) {
newProgressWidth = this.videoProgressWidth;
}
this.ProgressWidth = newProgressWidth;
this.percentValue = this.ProgressWidth / (this.videoProgressWidth / 100);
this.$emit('progressChange', { value: this.percentValue });
},
},
computed: {
// 是否使用插槽
isUseRoundSlot() {
return !!this.$slots.round;
},
sliderStyle() {
let sliderLeft = this.ProgressWidth - this.sliderWidth / 2;
if (sliderLeft < 0) {
sliderLeft = 0;
} else if (sliderLeft > this.videoProgressWidth - this.sliderWidth) {
sliderLeft = this.videoProgressWidth - this.sliderWidth;
}
console.log(this.sliderWidth,this.sliderHeight,this.sliderColor)
return {
width: this.sliderWidth + 'px',
height: this.sliderHeight + 'px',
backgroundColor: this.sliderColor,
borderRadius: this.borderRadius+'px',
position: 'absolute',
left: sliderLeft + 'px',
transition: this.touchStart == 'move' ? 'none' : 'all 0.3s linear'
};
},
}
};
export default pageOptions;
</script>
<style>
</style>
原文地址：https://blog.csdn.net/m0_60053251/article/details/142560204
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！