66 lines
2.8 KiB
Plaintext
66 lines
2.8 KiB
Plaintext
<!-- perf-progress-bar 组件
|
||
Props:
|
||
filledPct : number 进度条填充百分比 0~100
|
||
clampedSparkPct : number 火星位置 0~100，夹紧在进度末端
|
||
currentTier : number 当前档位 0~5，控制刻度高亮
|
||
ticks : Array<{value: number, label: string, left: string}> 刻度数组（接口传入）
|
||
shineRunning : boolean 高光单次播放触发
|
||
sparkRunning : boolean 火花单次播放触发
|
||
shineDurMs : number 高光动画时长（毫秒）
|
||
sparkDurMs : number 火花动画时长（毫秒）
|
||
-->
|
||
<view class="ppb-wrap">
|
||
<!-- 进度条轨道 -->
|
||
<view class="ppb-track">
|
||
<!-- 底轨背景 -->
|
||
<view class="ppb-track-bg"></view>
|
||
|
||
<!-- 渐变填充条 -->
|
||
<view
|
||
class="ppb-fill"
|
||
style="width: {{filledPct}}%"
|
||
wx:if="{{filledPct > 0}}"
|
||
>
|
||
<!-- 全宽渐变层 -->
|
||
<view class="ppb-gradient-bar"></view>
|
||
<!-- 高光 -->
|
||
<view
|
||
class="ppb-shine {{shineRunning ? 'ppb-shine--active' : ''}}"
|
||
style="animation-duration: {{shineDurMs}}ms"
|
||
></view>
|
||
</view>
|
||
|
||
<!-- 分隔竖线：由 ticks 数组动态渲染，跳过第一个（0）和最后一个 -->
|
||
<view
|
||
wx:for="{{ticks}}"
|
||
wx:key="value"
|
||
wx:if="{{index > 0 && index < ticks.length - 1}}"
|
||
class="ppb-divider"
|
||
style="left: {{item.left}}"
|
||
></view>
|
||
|
||
<!-- 导火索火星 -->
|
||
<view
|
||
class="ppb-edge-glow {{sparkRunning ? 'ppb-edge-glow--active' : ''}}"
|
||
style="left: {{clampedSparkPct}}%; animation-duration: {{sparkDurMs}}ms"
|
||
>
|
||
<view class="ppb-spark ppb-spark-1 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
|
||
<view class="ppb-spark ppb-spark-2 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
|
||
<view class="ppb-spark ppb-spark-3 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
|
||
<view class="ppb-spark ppb-spark-4 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
|
||
<view class="ppb-spark ppb-spark-5 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
|
||
<view class="ppb-spark ppb-spark-6 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 刻度 -->
|
||
<view class="ppb-ticks">
|
||
<text
|
||
wx:for="{{ticks}}"
|
||
wx:key="value"
|
||
class="ppb-tick {{currentTier >= index ? 'ppb-tick--done' : ''}} {{item.highlight ? 'ppb-tick--highlight' : ''}}"
|
||
style="{{index === 0 ? 'left:0' : index === ticks.length-1 ? 'right:0' : 'left:' + item.left + ';transform:translateX(-50%)'}}"
|
||
>{{item.label}}</text>
|
||
</view>
|
||
</view>
|