封装Progress 组件

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

<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) {
      return
      this.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) {
      return
      this.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>

原文地址：https://blog.csdn.net/m0_60053251/article/details/142458623

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！