wxlitian/miniprogram/miniprogram_npm/tdesign-miniprogram/slider/slider.wxml

<wxs src="./slider.wxs" module="utils" />
<view
  class="{{classPrefix}}__container {{isScale && scaleTextArray.length ? classPrefix + '--bottom' : ''}} {{prefix}}-class {{disabled ? prefix + '-is-disabled ' + prefix + '-class-bar-disabled' : ''}}"
>
  <block wx:if="{{!range}}">
    <view class="{{classPrefix}}__wrapper">
      <text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--min">
        {{ label ? utils.getValue(label, min) : min}}
      </text>
      <view
        id="sliderLine"
        class="{{classPrefix}}__main {{prefix}}-class-bar"
        style="background-color: {{disabled ? disabledColor[1] : colors[1]}};"
        bind:tap="onSingleLineTap"
      >
        <block wx:if="{{isScale}}">
          <view
            class="{{classPrefix}}__scale-item"
            wx:for="{{scaleArray}}"
            wx:for-index="index"
            wx:key="index"
            style="background:{{_value < item ? (disabled ? disabledColor[1] : colors[1]) : ( disabled ? disabledColor[0] : colors[0])}}; left:{{item}}%; transform:translateX({{- item}}%);"
          >
            <view wx:if="{{scaleTextArray.length}}" class="{{classPrefix}}__scale-desc">
              {{scaleTextArray[index]}}
            </view>
          </view>
        </block>
        <view
          class="{{classPrefix}}__line {{prefix}}-class-bar-active"
          style="background-color: {{disabled ? disabledColor[0] : colors[0]}}; left: {{lineLeft}}px; width: {{lineBarWidth}};"
        >
          <view
            id="singleDot"
            class="{{classPrefix}}__dot {{prefix}}-class-cursor"
            style="left: {{activeLeft}}px; border-color: {{disabled ? disabledColor[0] : ''}}"
            bind:touchmove="onSingleLineTap"
            bind:touchend="onTouchEnd"
            bind:touchcancel="onTouchEnd"
          />
        </view>
      </view>

      <view wx:if="{{label}}" class="{{classPrefix}}__value {{classPrefix}}__value--right">
        <text class="{{classPrefix}}__value--text"> {{utils.getValue(label, _value)}}</text>
      </view>
      <text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--max">
        {{ label ? utils.getValue(label, max) : max}}
      </text>
    </view>
  </block>
  <!-- range选择器自定义 -->
  <block wx:if="{{range}}">
    <view class="{{classPrefix}}__range-container">
      <view
        wx:if="{{showExtremeValue}}"
        class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--min"
      >
        {{min}}
      </view>
      <view
        id="sliderLine"
        bind:tap="onLineTap"
        class="{{classPrefix}}__bar {{prefix}}-class-bar"
        style="background-color: {{disabled ? disabledColor[1] : colors[1]}};"
      >
        <block wx:if="{{isScale}}">
          <view
            class="{{classPrefix}}__scale-item"
            wx:for="{{scaleArray}}"
            wx:for-index="index"
            wx:key="index"
            style="background:{{dotTopValue[1] < item || item < dotTopValue[0] ? (disabled ? disabledColor[1] : colors[1]) : ( disabled ? disabledColor[0] : colors[0])}};left: {{item}}%;transform:translateX({{- item}}%);"
          >
            <view wx:if="{{scaleTextArray.length}}">{{scaleTextArray[index]}}</view>
          </view>
        </block>
        <view
          class="{{classPrefix}}__line {{prefix}}-class-bar-active"
          style="background-color: {{disabled ? disabledColor[0] : colors[0]}}; left: {{lineLeft}}px; right: {{lineRight}}px;"
        />
        <view
          id="leftDot"
          bind:touchmove="onTouchMoveLeft"
          bind:touchend="onTouchEnd"
          bind:touchcancel="onTouchEnd"
          class="{{classPrefix}}__dot {{classPrefix}}__dot--left {{prefix}}-class-cursor"
          style="left: {{activeLeft}}px; border-color: {{disabled ? disabledColor[0] : ''}}"
        >
          <view wx:if="{{label}}" class="{{classPrefix}}__dot-value">
            {{utils.getValue(label, dotTopValue[0])}}
          </view>
        </view>
        <view
          id="rightDot"
          bind:touchmove="onTouchMoveRight"
          bind:touchend="onTouchEnd"
          bind:touchcancel="onTouchEnd"
          class="{{classPrefix}}__dot {{classPrefix}}__dot--right {{prefix}}-class-cursor"
          style="right: {{activeRight}}px; border-color: {{disabled ? disabledColor[0] : ''}}"
        >
          <view wx:if="{{label}}" class="{{classPrefix}}__dot-value">
            {{utils.getValue(label, dotTopValue[1])}}
          </view>
        </view>
      </view>
      <view
        wx:if="{{showExtremeValue}}"
        class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--max"
      >
        {{max}}
      </view>
    </view>
  </block>
</view>