index.wxml 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Slider</view>
  4. <view class="page__desc">滑动选择器</view>
  5. </view>
  6. <view class="page__bd page__bd_spacing">
  7. <view class="sub-title">Default</view>
  8. <wux-slider defaultValue="{{ [10] }}" />
  9. <view class="sub-title">Custom tip</view>
  10. <wux-slider defaultValue="{{ [10] }}" tipFormatter="{d} %" />
  11. <view class="sub-title">No tip</view>
  12. <wux-slider defaultValue="{{ [10] }}" tipFormatter="" />
  13. <view class="sub-title">Disabled</view>
  14. <wux-slider defaultValue="{{ [10] }}" disabled />
  15. <view class="sub-title">Show value</view>
  16. <wux-slider defaultValue="{{ [10] }}" showValue />
  17. <view class="sub-title">Use icons</view>
  18. <wux-slider defaultValue="{{ [10] }}">
  19. <wux-icon wux-class="min" type="ios-volume-mute" slot="min" />
  20. <wux-icon wux-class="max" type="ios-volume-high" slot="max" />
  21. </wux-slider>
  22. <view class="sub-title">Step = 10</view>
  23. <wux-slider defaultValue="{{ [10] }}" showValue step="10" />
  24. <view class="sub-title">Show mark</view>
  25. <wux-slider defaultValue="{{ [100] }}" showMark step="25" markStyle="background-color: red" />
  26. <wux-slider defaultValue="{{ [100] }}" showMark step="25" markStyle="{{ ['background-color: red', 'background-color: yellow', 'background-color: blue'] }}" />
  27. <view class="sub-title">Min and max</view>
  28. <wux-slider defaultValue="{{ [12] }}" showValue step="11" min="0" max="88" />
  29. <view class="sub-title">Controlled</view>
  30. <wux-slider value="{{ value }}" controlled bind:change="onChange" bind:afterChange="afterChange" />
  31. <view class="sub-title">Custom style</view>
  32. <wux-slider defaultValue="{{ [10] }}" railStyle="background-color: blue" trackStyle="background-color: red" handleStyle="background-color: yellow" />
  33. <wux-slider defaultValue="{{ [10, 30, 50] }}" railStyle="background-color: blue" trackStyle="{{ ['background-color: red', 'background-color: yellow'] }}" handleStyle="{{ ['background-color: yellow', 'background-color: red', 'background-color: blue'] }}" />
  34. <view class="sub-title">Range = 2</view>
  35. <wux-slider defaultValue="{{ [10, 30] }}" />
  36. <view class="sub-title">Range = 3</view>
  37. <wux-slider defaultValue="{{ [10, 30, 50] }}" />
  38. </view>
  39. </view>