当前位置：首页 > news >正文

封装Progress 组件

news 来源：原创 2024/9/24 8:50:33

因为业务需求所以有的地方没有放开，如有需要自行修改

<template><wbx-view ref="styleObj"><wbx-view style="position: relative;display: flex;flex-direction: row; align-items: center;" :style="{ width: videoProgressWidth + 'px',height:progressHeight+'px'}" @touchmove="handleTouchMove"@touchend~stop="handleTouch"><wbx-view style="position: absolute;transition: all 0.3s linear;" :style="{ height: progressHeight + 'px',borderRadius:radiusNum+'px'}"><wbx-view :style="{width: videoProgressWidth + 'px',height:progressHeight+'px',backgroundColor:progressBackgroundColor}" style="transition: all 0.3s linear;"></wbx-view><wbx-view :style="{ width: ProgressWidth,height:progressHeight+'px',backgroundColor:progressColor }" style="position: absolute;top: 0;"></wbx-view></wbx-view></wbx-view></wbx-view>
</template><script>
/*** 用法* * @type WBXAppOption*/
const pageOptions = {data() {return {boxProgressWidth:0,//整体进度条的宽度boxHeight:0,//整体进度条的高度progressHeight: 5, //进度条移动高度ProgressWidth: 0, //进度条移动的宽度marginLeftNum: 0, //距离左边距离percent: 0, //进度条移动的距离};},props: {videoProgressWidth: {type: Number,default: 300,},progressBackgroundColor:{type:String,default:'#e6e6e6'},progressColor:{type:String,default:'#bfbfbf'},ProgressWidth:{type: Number,default: 0,},progressHeight:{type: Number,default: 5,},radiusNum:{type: Number,default: 0,}},wbox: {onLoad() { },onShow() {// 页面显示/切入前台时触发},onHide() {// console.log(this.$refs.types,9999)// 页面隐藏时触发},onUnload() {// 页面退出时触发},},created() {// this.marginLeftNum =//   (wbx.getSystemInfoSync().windowWidth - this.videoProgressWidth) / 2;},mounted() { // this.progressStyleObject = this.$refs.styleObj.styleObject;// console.log(this.progressStyleObject ,"this.$refs.styleObj333",this.$refs.styleObj)// this.boxHeight=parseFloat(this.progressStyleObject.height)?parseFloat(this.progressStyleObject.height):10// this.videoProgressWidth=parseFloat(this.progressStyleObject.width)?parseFloat(this.progressStyleObject.width):300// console.log(this.videoProgressWidth,9999999)// this.progressHeight=parseFloat(this.progressStyleObject.height)?parseFloat(this.progressStyleObject.height):5},methods: {// 格式化时间formatMilliseconds(milliseconds) {const seconds = Math.floor(milliseconds / 1000);const minutes = Math.floor(seconds / 60);const secs = seconds % 60;const minutesFormatted = String(minutes).padStart(2, "0");const secondsFormatted = String(secs).padStart(2, "0");return `${minutesFormatted}:${secondsFormatted}`;},a() {// this.progressHeight = 10;},// 点击事件handleTouch(e) {returnthis.strokeHeight = 2;this.progressHeight = parseFloat(this.progressStyleObject.height)/2;console.log(e,"wwwwwwwwwwwwww")let minx = e.touches[0].clientX - this.marginLeftNum;if (minx > this.videoProgressWidth) {this.percent = this.videoProgressWidth;} else if (minx <= 0) {this.percent = 0;} else {this.percent = minx;}this.ProgressWidth = this.percent;this.$emit('moveDistance',this.ProgressWidth+this.marginLeftNum)// this.percent = parseInt((minx / this.videoProgressWidth) * 100);// this.seekTo = (this.percent / 100) * parseInt(this.duration);},// 滑动事件handleTouchMove(e) {returnthis.strokeHeight = 5;this.progressHeight = parseFloat(this.progressStyleObject.height);let minx = e.touches[0].clientX-this.marginLeftNum;if (minx > this.videoProgressWidth) {this.percent = this.videoProgressWidth;} else if (minx <= 0) {this.percent = 0;} else {this.percent = minx;}this.ProgressWidth = this.percent;this.$emit('moveDistance',this.ProgressWidth+this.marginLeftNum)// this.percent = (minx / this.videoProgressWidth) * 100;// this.seekTo = (minx/ this.videoProgressWidth)* this.duration;// this.seekTo = parseInt((minx/ this.videoProgressWidth)* this.duration/1000)*1000;},},computed: {// columnWidth() {//   return (this.containerWidth - (this.columnCount - 1) * this.columnGap) / this.columnCount// }},watch: {// items: {//   handler() {//     this.$nextTick(this.updateLayout)//   },//   deep: true// }},beforeDestroy() { },};
export default pageOptions;
</script>
<style></style>