# SeekBar 滑杆

请扫码查看示例

# 介绍

本组件是美居APP自定义组件，只能在APP上展示，在浏览器中无法预览。此组件是原生组件，不需要导入

# 引入

APP内置组件，可直接使用cross-view标签。

# 代码演示

# 基本用法

<div class="wrapper">
  <cross-view id="cross-seek-bar_1" class="cross-view" type="midea-seek-bar" crossprops="{{crossData}}" onCallMethod="onCallMethod"></cross-view>
</div>

1
2
3
4

import prompt from '@system.prompt'
export default {
  data: {
    crossData: JSON.stringify({
      max: 100, //最大值
      min: 0, //最小值
      value: 50,
      unit: '这是自定义提示', //tips描述
      showTip: true,
      step: 5, //步长
      axisH: 10, //轴高度(px)
      pointH: 18, //圆球高度（px)
      axisColor: '#DFE5E7', // 滑条未拖动时颜色
      pointColor: '#23aaf2', // 圆球颜色
      axisBgColor: '#7130d3', // 滑条拖动后背景颜色
      disable: false,
      sliderImage: 'data:image/jpeg;base64,/9j/...'
    }),
  },
  /**
   * 原生回调方法
   */
  onCallMethod({ method, params }) {
    if (method == 'slideEnd') {
      prompt.showToast({
        message: 'slideEnd',
        duration: 2000,
      });
    } else if (method == 'slideChange') {
      prompt.showToast({
        message: 'slideChange',
        duration: 2000,
      });
    }
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# Api

# Prop

字段	说明	类型	默认值	是否必须
`type`	原生组件类型	`String`	`midea-seek-bar`	`是`
`crossprops`	参数	`String`	`{}附表1`	`是`

# 附表1

字段	说明	类型	默认值	是否必须
`max`	滑动条最大值	`Number`	100	`否`
`min`	滑动条最小值	`Number`	0	`否`
`value`	滑快初始化默认值	`Number`	0	`否`
`unit`	自定义提示	`String`	%	`否`
`showTip`	是否显示提示	`Boolean`	false	`否`
`step`	步长	`Number`	1	`否`
`axisH`	轴高度	`Number`	-	`否`
`pointH`	滑块高度	`Number`	-	`否`
`axisColor`	滑块未拖动时颜色	`String`	-	`否`
`pointColor`	滑块颜色	`String`	-	`否`
`axisBgColor`	滑条拖动后背景颜色	`String`	-	`否`
`disable`	禁止滑动	`Boolean`	false	`否`
`sliderImage`	base64图片作为滑块背景	`String`	-	`否`

# Events

名称	说明	回调参数
`onCallMethod`	原生回调成功触发	`{method}`附表1

# method回调方法（附表1）

方法名称	说明	备注
`slideEnd`	滑动动作结束的触发回调	-
`slideChange`	滑动动作结束的触发回调	-