引入

  1. {
  2.   "usingComponents": {
  3.     "x-slider":"waft-ui/assembly/slider/slider"
  4.   }
  5. }

代码示例

  1.  <x-slider width="{{ 100 }}" value="{{ 30 }}"></x-slider>

效果展示

slider.png

组件样式

axml

  1. <view class="slider">
  2.   <x-nav-bar showArrow="{{true}}" title="测试Slider"></x-nav-bar>
  3.   <view class="page">
  4.     <view class="left">
  5.       <x-scroll>
  6.         <view>
  7.           <view class="title">基础使用</view>
  8.           <x-slider value="{{ 30 }}"></x-slider>
  9.           <view class="title">自定义组件宽度</view>
  10.           <view class="flex">
  11.             <x-slider width="{{ 100 }}" value="{{ 30 }}"></x-slider><view class="dot"></view>
  12.             <x-slider width="{{ 300 }}" value="{{ 30 }}"></x-slider><view class="dot"></view>
  13.             <x-slider width="{{ 500 }}" value="{{ 30 }}"></x-slider>
  14.           </view>
  16.           <view class="title">自定义颜色</view>
  17.           <view class="flex">
  18.             <x-slider value="{{ 30 }}" activeColor="green" inactiveColor="red"></x-slider><view class="dot"></view>
  19.             <x-slider value="{{ 30 }}" activeColor="gold" inactiveColor="blue"></x-slider><view class="dot"></view>
  20.             <x-slider value="{{ 30 }}" activeColor="#F5A623" inactiveColor="blueviolet"></x-slider>
  21.           </view>
  22.           <view class="title">自定义滑槽高度与滑块大小与滑槽圆角</view>
  23.           <view class="flex">
  24.             <x-slider value="{{ 30 }}" grooveWidth="{{ 6 }}"></x-slider><view class="dot"></view>
  25.             <x-slider value="{{ 30 }}" barColor="#0082ff" grooveWidth="{{ 15 }}"></x-slider><view class="dot"></view>
  26.             <x-slider value="{{ 30 }}" grooveWidth="{{ 30 }}" grooveRadius="{{ 15 }}"></x-slider><view class="dot"></view>
  27.             <x-slider value="{{ 30 }}" grooveWidth="{{ 40 }}" barRadius="{{ 20 }}" grooveRadius="{{ 20 }}"></x-slider><view class="dot"></view>
  28.           </view>
  29.           <view class="title">自定义滑块颜色与大小</view>
  30.           <view class="flex">
  31.             <x-slider value="{{ 30 }}" grooveWidth="{{ 40 }}" barRadius="{{ 20 }}" grooveRadius="{{ 20 }}"></x-slider><view class="dot"></view>
  32.             <x-slider value="{{ 30 }}" barColor="red" grooveWidth="{{ 40 }}" barRadius="{{ 15 }}" grooveRadius="{{ 20 }}"></x-slider><view class="dot"></view>
  33.             <x-slider value="{{ 30 }}" barColor="green" grooveWidth="{{ 40 }}" barRadius="{{ 10 }}" grooveRadius="{{ 20 }}"></x-slider><view class="dot"></view>
  34.             <x-slider value="{{ 30 }}" barColor="#F5A623" grooveWidth="{{ 40 }}" barRadius="{{ 25 }}" grooveRadius="{{ 20 }}"></x-slider><view class="dot"></view>
  35.           </view>
  36.           <view class="title">滑块类型</view>
  37.           <view class="flex">
  38.             <x-slider barType="circle" value="{{ 30 }}"></x-slider><view class="dot"></view>
  39.             <x-slider barType="block" value="{{ 30 }}"></x-slider><view class="dot"></view>
  40.             <x-slider barType="dount" value="{{ 30 }}"></x-slider>
  41.           </view>
  42.         </view>
  43.       </x-scroll>
  44.     </view>
  45.     <view class="right">
  46.       <view class="title">注意: 纵向的不能使用在 x-scroll 滚动里面, 与滚动方向一直会导致滚动行为无法监听到</view>
  47.       <view class="title">注意: 有滚动会导致 slider 滑动的不流畅</view>
  48.       <view class="title">方向</view>
  49.       <view class="flex">
  50.         <x-slider direction="column" barType="circle" value="{{ 30 }}"></x-slider><view class="dot"></view>
  51.         <x-slider direction="column" barType="block" value="{{ 30 }}"></x-slider><view class="dot"></view>
  52.         <x-slider direction="column" barType="dount" value="{{ 30 }}"></x-slider><view class="dot"></view>
  53.         <x-slider direction="column" value="{{ 30 }}" grooveWidth="{{ 30 }}" grooveRadius="{{ 15 }}"></x-slider><view class="dot"></view>
  54.         <x-slider direction="column" value="{{ 30 }}" grooveWidth="{{ 40 }}" barRadius="{{ 20 }}" grooveRadius="{{ 20 }}"></x-slider><view class="dot"></view>
  55.         <x-slider direction="column" barType="block" value="{{ 30 }}" grooveWidth="{{ 40 }}" barRadius="{{ 20 }}" grooveRadius="{{ 0 }}"></x-slider><view class="dot"></view>
  56.         <x-slider direction="column" value="{{ 30 }}" grooveWidth="{{ 40 }}" barRadius="{{ 20 }}" grooveRadius="{{ 20 }}" activeColor="#F5A623" inactiveColor="blueviolet"></x-slider><view class="dot"></view>
  57.       </view>
  58.     </view>
  59.   </view>
  60. </view>

css

  1. .slider{
  2.     width: 100vw;
  3.     height: 100vh;
  4.     background-color: #E6F2FF;
  5. }
  6. .page {
  7.     width: 100%;
  8.     padding: 20rpx;
  9.     display: flex;
  10.     flex-direction: row;
  11.     justify-content: flex-start;
  12.     align-items: flex-start;
  13. }
  14. .left {
  15.     flex: 2;
  16.     height: 100%;
  17. }
  18. .right {
  19.     flex: 1;
  20.     height: 100%;
  21. }
  22. .title {
  23.     color: #2b3852;
  24.     font-size: 26rpx;
  25.     font-weight: bold;
  26.     margin: 5rpx 0;
  27. }
  28. .flex {
  29.     display: flex;
  30.     flex-direction: row;
  31.     justify-content: flex-start;
  32.     align-content: flex-start;
  33.     flex-wrap: wrap;
  34. }
  35. .dot {
  36.     width: 10rpx;
  37. }
  38. .radius {
  39.     height: 40rpx;
  40.     border-radius: 20rpx;
  41.     overflow: hidden;
  42. }

json

{
  "usingComponents": {
    "x-slider": "../assembly/slider/slider",
    "x-scroll": "../assembly/scroll/scroll"
  }
}

API

  • props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | step | 步进值 | number | 1 | | min | 最小值 | number | 0 | | max | 最大值 | number | 100 | | width | 组件的宽度 | number | 200 | | value | 组件的值 | number | 0 | | grooveWidth | slider 滑动槽的宽度 | number | 3 | | grooveRadius | slider 滑动槽的 border-radius | number | 0 | | barRadius | 按钮半径 | number | 15 | | barColor | 按钮颜色 | string | #FFF | | barBorderColor | 按钮 border 颜色 | string | #EEE | | barType | 按钮类型, circle[圆] | block[方块] | dount[同心圆环] | string | circle | | direction | slider 方向, row[横向] | column [纵向] | string | row | | activeColor | 选择部分的值的槽颜色 | string | #0082ff | | inactiveColor | 未选择部分的槽颜色 | string | #807F7F |

  • Events | 事件名 | 说明 | 参数 | | —- | —- | —- | | change | (value: number) => {} 值改变之后的回调 |
    | | dragStart | (dataset: JSONObject) => {} 拖拽开始的回调 | | | dragEnd | (dataset: JSONObject) => {} 拖拽结束的回调 | |