index.wxml 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <wxs src="../wxs/utils.wxs" module="utils" />
  2. <wxs src="../wxs/style.wxs" module="style" />
  3. <view
  4. class="custom-class {{ utils.bem('slider', { disabled }) }}"
  5. style="{{ style({ background: inactiveColor, height: utils.addUnit(barHeight) }) }}"
  6. bind:tap="onClick"
  7. >
  8. <view
  9. class="{{ utils.bem('slider__bar') }}"
  10. style="{{ barStyle }}; {{ style({ backgroundColor: activeColor }) }}"
  11. >
  12. <view
  13. wx:if="{{ range }}"
  14. class="{{ utils.bem('slider__button-wrapper-left') }}"
  15. data-index="{{ 0 }}"
  16. bind:touchstart="onTouchStart"
  17. catch:touchmove="onTouchMove"
  18. bind:touchend="onTouchEnd"
  19. bind:touchcancel="onTouchEnd"
  20. >
  21. <slot
  22. wx:if="{{ useButtonSlot }}"
  23. name="left-button"
  24. />
  25. <view
  26. wx:else
  27. class="{{ utils.bem('slider__button') }}"
  28. />
  29. </view>
  30. <view
  31. wx:if="{{ range }}"
  32. class="{{ utils.bem('slider__button-wrapper-right') }}"
  33. data-index="{{ 1 }}"
  34. bind:touchstart="onTouchStart"
  35. catch:touchmove="onTouchMove"
  36. bind:touchend="onTouchEnd"
  37. bind:touchcancel="onTouchEnd"
  38. >
  39. <slot
  40. wx:if="{{ useButtonSlot }}"
  41. name="right-button"
  42. />
  43. <view
  44. wx:else
  45. class="{{ utils.bem('slider__button') }}"
  46. />
  47. </view>
  48. <view
  49. wx:if="{{ !range }}"
  50. class="{{ utils.bem('slider__button-wrapper') }}"
  51. bind:touchstart="onTouchStart"
  52. catch:touchmove="onTouchMove"
  53. bind:touchend="onTouchEnd"
  54. bind:touchcancel="onTouchEnd"
  55. >
  56. <slot
  57. wx:if="{{ useButtonSlot }}"
  58. name="button"
  59. />
  60. <view
  61. wx:else
  62. class="{{ utils.bem('slider__button') }}"
  63. />
  64. </view>
  65. </view>
  66. </view>