2026.1.16

riku

2026-01-16 1f9e43b7bbb848c7ee2aaa89ffece17002b2c915

 miniprogram_npm/tdesign-miniprogram/slider/slider.wxml

@@ -1,159 +1 @@
<wxs src="./slider.wxs" module="t" />
<wxs src="../common/utils.wxs" module="_" />

<view
  style="{{_._style([style, customStyle])}}"
  class="{{_.cls(classPrefix, [['top', label || scaleTextArray.length], ['disabled', disabled], ['range', range]])}} class {{prefix}}-class"
>
  <block wx:if="{{!range}}">
    <text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--min">
      {{ label ? t.getValue(label, min) : min}}
    </text>
    <view
      id="sliderLine"
      class="{{_.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']])}} {{prefix}}-class-bar"
      bind:tap="onSingleLineTap"
    >
      <block wx:if="{{isScale}}">
        <view
          class="{{_.cls(classPrefix + '__scale-item', [['active', _value >= item.val], ['disabled', disabled], theme, ['hidden', (index == 0 || index == scaleArray.length - 1) && theme == 'capsule' || value == item.val]])}}"
          wx:for="{{scaleArray}}"
          wx:key="index"
          style="left:{{item.left}}px; transform: translateX(-50%);"
          aria-hidden="{{true}}"
        >
          <view wx:if="{{scaleTextArray.length}}" class="{{_.cls(classPrefix + '__scale-desc', [theme])}}}}">
            {{scaleTextArray[index]}}
          </view>
        </view>
      </block>
      <view
        class="{{_.cls(classPrefix + '__line', [['disabled', disabled], theme, 'single'])}} {{prefix}}-class-bar-active"
        style="width: {{lineBarWidth}}"
      >
        <view
          id="singleDot"
          class="{{classPrefix}}__dot {{prefix}}-class-cursor"
          bind:touchstart="onTouchStart"
          bind:touchmove="onSingleLineTap"
          bind:touchend="onTouchEnd"
          bind:touchcancel="onTouchEnd"
        >
          <view
            wx:if="{{label || isVisibleToScreenReader}}"
            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !label]])}}"
            aria-role="alert"
            aria-live="assertive"
            aria-hidden="{{!isVisibleToScreenReader}}"
          >
            {{t.getValue(label, _value) || _value}}
          </view>
          <view
            class="{{classPrefix}}__dot-slider"
            aria-role="slider"
            aria-disabled="{{disabled}}"
            aria-valuemax="{{max}}"
            aria-valuemin="{{min}}"
            aria-valuenow="{{_value}}"
            aria-valuetext="{{t.getValue(label, _value) || _value}}"
          ></view>
        </view>
      </view>
    </view>
    <!-- <view wx:if="{{label}}" class="{{classPrefix}}__value {{classPrefix}}__value--right">
      <text class="{{classPrefix}}__value--text"> {{t.getValue(label, _value)}}</text>
    </view> -->
    <text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--max">
      {{ label ? t.getValue(label, max) : max}}
    </text>
  </block>
  <!-- range选择器自定义 -->
  <block wx:if="{{range}}">
    <view wx:if="{{showExtremeValue}}" class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--min">
      {{min}}
    </view>
    <view
      id="sliderLine"
      bind:tap="onLineTap"
      class="{{_.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']])}} {{prefix}}-class-bar"
    >
      <block wx:if="{{isScale}}">
        <view
          class="{{_.cls(classPrefix + '__scale-item', [['active', dotTopValue[1] >= item.val && item.val >= dotTopValue[0]], ['disabled', disabled], theme, ['hidden', (index == 0 || index == scaleArray.length - 1) && theme == 'capsule' || value == item.val]])}}"
          wx:for="{{scaleArray}}"
          wx:for-index="index"
          wx:key="index"
          style="left: {{item.left}}px; transform: translateX(-50%)"
          aria-hidden="{{true}}"
        >
          <view wx:if="{{scaleTextArray.length}}" class="{{_.cls(classPrefix + '__scale-desc', [theme])}}"
            >{{scaleTextArray[index]}}</view
          >
        </view>
      </block>
      <view
        class="{{_.cls(classPrefix + '__line', [['disabled', disabled], theme])}} {{prefix}}-class-bar-active"
        style="left: {{lineLeft}}px; right: {{lineRight}}px"
      >
        <view
          id="leftDot"
          bind:touchstart="onTouchStart"
          bind:touchmove="onTouchMoveLeft"
          bind:touchend="onTouchEnd"
          bind:touchcancel="onTouchEnd"
          class="{{classPrefix}}__dot {{classPrefix}}__dot--left {{prefix}}-class-cursor"
        >
          <view
            wx:if="{{label || isVisibleToScreenReader}}"
            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !label]])}}"
            aria-role="alert"
            aria-live="assertive"
            aria-hidden="{{!isVisibleToScreenReader}}"
          >
            {{t.getValue(label, dotTopValue[0]) || dotTopValue[0]}}
          </view>
          <view
            class="{{classPrefix}}__dot-slider"
            aria-role="slider"
            aria-disabled="{{disabled}}"
            aria-valuemax="{{max}}"
            aria-valuemin="{{min}}"
            aria-valuenow="{{dotTopValue[0]}}"
            aria-valuetext="{{t.getValue(label, dotTopValue[0]) || dotTopValue[0]}}"
          ></view>
        </view>
        <view
          id="rightDot"
          bind:touchstart="onTouchStart"
          bind:touchmove="onTouchMoveRight"
          bind:touchend="onTouchEnd"
          bind:touchcancel="onTouchEnd"
          class="{{classPrefix}}__dot {{classPrefix}}__dot--right {{prefix}}-class-cursor"
        >
          <view
            wx:if="{{label || isVisibleToScreenReader}}"
            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !label]])}}"
            aria-role="alert"
            aria-live="assertive"
            aria-hidden="{{!isVisibleToScreenReader}}"
          >
            {{t.getValue(label, dotTopValue[1]) || dotTopValue[1]}}
          </view>
          <view
            class="{{classPrefix}}__dot-slider"
            aria-role="slider"
            aria-disabled="{{disabled}}"
            aria-valuemax="{{max}}"
            aria-valuemin="{{min}}"
            aria-valuenow="{{dotTopValue[1]}}"
            aria-valuetext="{{t.getValue(label, dotTopValue[1]) || dotTopValue[1]}}"
          >
          </view>
        </view>
      </view>
    </view>
    <view wx:if="{{showExtremeValue}}" class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--max">
      {{max}}
    </view>
  </block>
</view>
<wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [['top', isShowLabel || scaleTextArray.length], ['disabled', disabled], ['range', range]])}} class {{prefix}}-class {{vertical ? classPrefix + '--vertical' : ''}}"><block wx:if="{{!range}}"><text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--min">{{extremeLabel[0]}}</text><view id="sliderLine" class="{{_.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']])}} {{prefix}}-class-bar" bind:tap="onSingleLineTap"><block wx:if="{{isScale}}"><view class="{{_.cls(classPrefix + '__scale-item', [['active', _value >= item.val], ['disabled', disabled], theme, ['hidden', (index == 0 || index == scaleArray.length - 1) && theme == 'capsule' || value == item.val]])}}" wx:for="{{scaleArray}}" wx:key="index" style="{{vertical ? 'top' :  'left'}}:{{item.left}}px; {{vertical ? 'transform: translate(-50%, -50%);' : 'transform: translateX(-50%);'}}" aria-hidden="{{true}}"><view wx:if="{{scaleTextArray.length}}" class="{{_.cls(classPrefix + '__scale-desc', [theme])}}">{{scaleTextArray[index]}}</view></view></block><view class="{{_.cls(classPrefix + '__line', [['disabled', disabled], theme, 'single'])}} {{prefix}}-class-bar-active" style="{{vertical ? 'height' : 'width'}}: {{lineBarWidth}}"><view id="singleDot" class="{{classPrefix}}__dot {{prefix}}-class-cursor" catch:touchstart="onTouchStart" catch:touchmove="onSingleLineTap" catch:touchend="onTouchEnd" catch:touchcancel="onTouchEnd"><view wx:if="{{isShowLabel || isVisibleToScreenReader}}" class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !isShowLabel]])}}" aria-role="alert" aria-live="assertive" aria-hidden="{{!isVisibleToScreenReader}}">{{realLabel}}</view><view class="{{classPrefix}}__dot-slider" aria-role="slider" aria-disabled="{{disabled}}" aria-valuemax="{{max}}" aria-valuemin="{{min}}" aria-valuenow="{{_value}}" aria-valuetext="{{realLabel}}"></view></view></view></view><text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--max">{{extremeLabel[1]}}</text></block><block wx:if="{{range}}"><view wx:if="{{showExtremeValue}}" class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--min">{{extremeLabel[0]}}</view><view id="sliderLine" bind:tap="onLineTap" class="{{_.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']])}} {{prefix}}-class-bar"><block wx:if="{{isScale}}"><view class="{{_.cls(classPrefix + '__scale-item', [['active', dotTopValue[1] >= item.val && item.val >= dotTopValue[0]], ['disabled', disabled], theme, ['hidden', (index == 0 || index == scaleArray.length - 1) && theme == 'capsule' || value == item.val]])}}" wx:for="{{scaleArray}}" wx:for-index="index" wx:key="index" style="{{vertical ? 'top' :  'left'}}:{{item.left}}px; {{vertical ? 'transform: translate(-50%, -50%);' : 'transform: translateX(-50%);'}}" aria-hidden="{{true}}"><view wx:if="{{scaleTextArray.length}}" class="{{_.cls(classPrefix + '__scale-desc', [theme])}}">{{scaleTextArray[index]}}</view></view></block><view class="{{_.cls(classPrefix + '__line', [['disabled', disabled], theme])}} {{prefix}}-class-bar-active" style="{{vertical ? 'top' : 'left'}}: {{lineLeft}}px; {{vertical ? 'bottom' : 'right'}}: {{lineRight}}px"><view id="leftDot" catch:touchstart="onTouchStart" catch:touchmove="onTouchMoveLeft" catch:touchend="onTouchEnd" catch:touchcancel="onTouchEnd" class="{{classPrefix}}__dot {{classPrefix}}__dot--left {{prefix}}-class-cursor"><view wx:if="{{isShowLabel || isVisibleToScreenReader}}" class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !isShowLabel]])}}" aria-role="alert" aria-live="assertive" aria-hidden="{{!isVisibleToScreenReader}}">{{realLabel[0] || dotTopValue[0]}}</view><view class="{{classPrefix}}__dot-slider" aria-role="slider" aria-disabled="{{disabled}}" aria-valuemax="{{max}}" aria-valuemin="{{min}}" aria-valuenow="{{dotTopValue[0]}}" aria-valuetext="{{realLabel[0] || dotTopValue[0]}}"></view></view><view id="rightDot" catch:touchstart="onTouchStart" catch:touchmove="onTouchMoveRight" catch:touchend="onTouchEnd" catch:touchcancel="onTouchEnd" class="{{classPrefix}}__dot {{classPrefix}}__dot--right {{prefix}}-class-cursor"><view wx:if="{{isShowLabel || isVisibleToScreenReader}}" class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !isShowLabel]])}}" aria-role="alert" aria-live="assertive" aria-hidden="{{!isVisibleToScreenReader}}">{{realLabel[1] || dotTopValue[1]}}</view><view class="{{classPrefix}}__dot-slider" aria-role="slider" aria-disabled="{{disabled}}" aria-valuemax="{{max}}" aria-valuemin="{{min}}" aria-valuenow="{{dotTopValue[1]}}" aria-valuetext="{{realLabel[1] || dotTopValue[1]}}"></view></view></view></view><view wx:if="{{showExtremeValue}}" class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--max">{{extremeLabel[1]}}</view></block></view>