wx-mini-weview/components/progress/progress.js

weixin UI

Component({
  options: {
    styleIsolation: 'apply-shared', 
    multipleSlots: true
  },
  
  properties: {
    // Progress direction: lr (left to right) or rl (right to left)
    direction: {
      type: String,
      value: 'lr'
    },
    // Progress value (0-100)
    progress: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // Ensure progress is between 0-100
        const clampedValue = Math.min(Math.max(0, newVal), 100);
        if (clampedValue !== newVal) {
          this.setData({ progress: clampedValue });
          return;
        }
        
        if (oldVal !== newVal) {
          this._updateProgress(oldVal, newVal);
        }
      }
    },
    // 主题（可选：primary, success, warning, error等）
    theme: {
      type: String,
      value: 'wv-theme-primary wv-content-light'
    },
    // Custom background for the bar
    backgroundBar: {
      type: String,
      value: ''
    },
    // Custom background for the progress
    backgroundInner: {
      type: String,
      value: ''
    },
    // Width of the progress bar
    width: {
      type: String,
      value: '100%'
    },
    // Thickness of the outer progress bar
    barThickness: {
      type: String,
      value: '30rpx'
    },
    // Thickness of the inner progress indicator
    innerThickness: {
      type: String,
      value: '30rpx'
    },
    // Animation duration (milliseconds)
    duration: {
      type: String,
      value: '600ms'
    },
    // Whether to animate progress changes
    animate: {
      type: Boolean,
      value: true
    },
    textProgressStyle: {
      type: String,
      value: ''
    },
    // none (hidden), side-left/side-right, bar-left/bar-center/bar-right, inner-left/inner-center/inner-right, up-left/up-center/up-right, down-left/down-center/down-right
    textProgressPosition: {
      type: String,
      value: 'in-right'
    },
    // Bar Border radius
    barBorderRadius: {
      type: String,
      value: '99rpx'
    }, 
    // Inner Border radius
    innerBorderRadius: {
      type: String,
      value: '99rpx'
    }, 
    // Whether to remove border radius at the end of the inner progress bar
    innerEndNoBorderRadius: {
      type: Boolean,
      value: true
    },
    // Custom style for the outer bar element
    barStyle: {
      type: String,
      value: ''
    },
    // Custom style for the inner progress element
    innerStyle: {
      type: String,
      value: ''
    },
    // Whether to show 3D effect for progress bar
    dimension: {
      type: Boolean,
      value: false
    },
    // Whether to show striped pattern on the inner progress bar
    striped: {
      type: Boolean,
      value: false
    }
  },
  
  data: {
    innerWidth: '0%',
    progressText: '0%',
    isComplete: false
  },
  
  lifetimes: {
    attached() {
      // Force initial width to be 0 without animation
      this.setData({
        innerWidth: '0%',
        progressText: '0%'
      });
      
      // Allow initial rendering to complete, then animate to the target value
      if (this.data.progress > 0 && this.data.animate) {
        setTimeout(() => {
          const progress = this.data.progress;
          this._updateProgress(0, progress);
        }, 50); // Short delay to ensure DOM has rendered
      }
    }
  },
  
  methods: {
    /**
     * Update the progress bar
     * @param {Number} fromValue - Starting value
     * @param {Number} toValue - Target value
     */
    _updateProgress(fromValue, toValue) {
      const progress = Math.min(Math.max(0, toValue), 100);
      const progressText = `${Math.round(progress)}%`;
      const isComplete = progress >= 100;
      
      this.setData({
        innerWidth: `${progress}%`,
        progressText,
        isComplete
      });
    }
  }
});