index.axml 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <import-sjs
  2. from="./index.sjs"
  3. name="sliderSjs" />
  4. <template name="slider-handler">
  5. <view
  6. class="ant-slider-handler"
  7. style="left: {{ position }}%">
  8. <popover
  9. placement="top"
  10. visible="{{ showTooltip }}"
  11. showMask="{{ false }}">
  12. <slot name="slider">
  13. <view class="ant-slider-handler-block">
  14. <view class="ant-slider-handler-icon-default">
  15. <view class="ant-slider-handler-icon-default-line1" />
  16. <view class="ant-slider-handler-icon-default-line2" />
  17. <view class="ant-slider-handler-icon-default-line3" />
  18. </view>
  19. </view>
  20. </slot>
  21. <view
  22. slot="content"
  23. class="ant-slider-tooltip-content">
  24. <slot
  25. name="tooltip"
  26. value="{{ value }}">
  27. {{ value }}
  28. </slot>
  29. </view>
  30. </popover>
  31. </view>
  32. </template>
  33. <view
  34. class="ant-slider {{ className ? className : '' }}"
  35. style="opacity: {{ disabled ? '0.4' : '1' }};">
  36. <view
  37. class="ant-slider-track {{ showNumber ? 'ant-slider-track-number' : '' }}">
  38. <view
  39. class="ant-slider-track-touch-area"
  40. id="ant-slider-id-{{ $id || '' }}"
  41. onTouchStart="handleTrackTouchStart"
  42. onTouchEnd="handleTrackTouchEnd"
  43. onTouchMove="handleTrackTouchMove">
  44. <view class="ant-slider-track-fill">
  45. <view class="ant-slider-track-fill-background" />
  46. <view
  47. class="ant-slider-track-fill-front {{ activeLineClassName || '' }}"
  48. style="width: {{ sliderWidth }}%; left: {{ sliderLeft }}%; {{ activeLineStyle || '' }}" />
  49. <view class="ant-slider-showTicks">
  50. <block
  51. a:for="{{ tickList }}"
  52. a:for-index="index"
  53. a:for-item="item">
  54. <view
  55. class="ant-slider-tick ant-slider-tick-{{ sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) ? 'front' : 'back' }} {{ sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) && activeDotClassName ? activeDotClassName : '' }}"
  56. style="left: {{ item.left }}%;{{ sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) && activeDotStyle ? activeDotStyle : '' }}">
  57. <view
  58. a:if="{{ showNumber }}"
  59. class="ant-slider-tick-number">
  60. <slot
  61. name="tick"
  62. value="{{ item.value }}">
  63. {{ item.value }}
  64. </slot>
  65. </view>
  66. </view>
  67. </block>
  68. </view>
  69. <template
  70. a:if="{{ range }}"
  71. is="slider-handler"
  72. data="{{ position: sliderLeft, icon: icon, value: mixin.value[0], showTooltip: changingStart && showTooltip }}" />
  73. <template
  74. is="slider-handler"
  75. data="{{ position: sliderLeft + sliderWidth, icon: icon, value: range ? mixin.value[1] : mixin.value, showTooltip: changingEnd && showTooltip }}" />
  76. </view>
  77. </view>
  78. </view>
  79. <view />
  80. </view>