slider 组件在安卓端效果不理想

[silverlight]

拖动的时候会频闪，动画有明显的滞后。这个现象在滑块/滑条的样式进行修改后尤为明显，默认样式表现好一些。ios在slider组件添加较多逻辑之后，也会出现一样的情况。我这段代码在ios端可以正常拖动，但在安卓端则出现图片中的情况

Code: Select all

  const SliderDemo = ({ min, max, step, value }) => {
    const [svalue, setSValue] = useState(value);
    const handleSliderchange =(value) =>{
      changgeslider=value;
      setSValue(value);
    }
    return (
      <View className={styles.slider}>
        <View className={styles.sliderTitle}>
          <View
            className={clsx(styles.sliderIcon, styles.flipX)}
            onClick={() => (handleSliderchange(svalue-step))}
            style={{ left: "100rpx" }}
          >
            <Icon type="icon-a-playfill" color="rgba(0, 0, 0, 0.2)" />
          </View>
          <View className={styles.sliderTitleText}>
            <PerfText eventName="sliderMove"  defaultValue={svalue} />
          </View>
          <View
            className={styles.sliderIcon}
            onClick={() => (handleSliderchange(svalue+step))}
            style={{ right: "100rpx" }}
          >
            <Icon color="rgba(0, 0, 0, 0.2)" type="icon-a-playfill" />
          </View>
        </View>
        <Slider
          min={min}
          max={max}
          step={step}
          value={svalue}
          onChange={handleSliderchange}
          moveEventName="sliderMove"
          maxTrackHeight="90rpx"
          minTrackHeight="90rpx"
          maxTrackColor="#CCE4FF"
          minTrackColor="#2B7AFF"
          maxTrackRadius="16rpx"
          thumbHeight="90rpx"
          thumbColor="#B3C5D9"
          thumbRadius="4rpx"
          thumbWidth="30rpx"
        />
      </View>
    );
  };

[silverlight]

我了解下来，是这种较快的交互，频繁的数据更新与通信导致的。在开发文档中我看到的解决方式就是使用sjs函数，或者使用css动画。

[muhai]

我了解下来，是这种较快的交互，频繁的数据更新与通信导致的。在开发文档中我看到的解决方式就是使用sjs函数，或者使用css动画。

这是因为Demo中是受控的写法，受控的情况下，setState更新流程会慢。可以按以下方法优化

Code: Select all

// 错误写法，受控，性能较差
const [val, setVal] = useState(0)
<Slider value={val} onChange={setVal} />

// 正确写法，使用onEnd而不是onChange
const [val, setVal] = useState(0)
<Slider value={val} onEnd={setVal} />

// 如有下发及数值实时展示需求，采用写法：
const [val, setVal] = useState(0)
const [showVal, setShowVal] = useState(0)

onDpDataChange(dp => {
  setVal(dp.bright_value)
})

<PrefText defaultValue={showVal}  eventName="brightValue" />
<Slider value={val} onEnd={value => publishDps({ bright_value: value })} moveEventName="brightValue" onChange={setShowVal} />

[silverlight]

// 正确写法，使用onEnd而不是onChange
const [val, setVal] = useState(0)
<Slider value={val} onEnd={setVal} />

1：请问你用的slider是哪个版本？我的版本是"@ray-js/components-ty-slider": "⁰.2.48",
2：我调用slider，其中并没有onend这个属性，应该是指onAfterChange这个属性吧？
3：我在使用onAfterChange之后情况正常，不出现频闪，想知道slider组件最近一次更新，更新内容是啥？
4：为什么ios比安卓这边情况好很多，我了解到ios和安卓系统的渲染层和逻辑层存在差异，是否是这个原因造成的？

Code: Select all

/// <reference types="react" />
import { Property } from 'csstype';
export interface IProps {
    instanceId?: string;
    /**
     * @description.zh 类名
     * @description.en class name
     */
    className?: string;
    /**
     * @description.zh 样式
     * @description.en Style
     */
    style?: React.CSSProperties;
    /**
     * @description.zh 是否垂直展示，垂直展示时，需要设置滑槽宽高
     * @description.en Whether to display vertically, when vertical display is set, the slider needs to set the width and height of the track
     * @default false
     */
    isVertical?: boolean;
    /**
     * @description.zh 样式
     * @description.en style
     */
    value?: number;
    /**
     * @description.zh 默认值
     * @description.en Default value
     * @default 0
     * @deprecated use value
     */
    defaultValue?: number;
    /**
     * @description.zh 最小值
     * @description.en Minimum value
     * @default 0
     */
    min?: number;
    /**
     * @description.zh 最大值
     * @description.en Maximum value
     * @default 100
     */
    max?: number;
    /**
     * @description.zh 步距，取值必须大于 `0`，并且可被 `(max - min)` 整除。
     * @description.en Step, the value must be greater than `0` and can be divided by `(max - min)`.
     * @default 1
     */
    step?: number;
    /**
     * @description.zh 和 step 一致，用于滑块不跟随刻度时设置
     * @description.en same as step, set when the thumb does not follow the step
     * @default 1
     * @deprecated
     */
    forceStep?: number;
    /**
     * @description.zh 是否禁用
     * @description.en Whether it is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * @description.zh 拖拽滑块时触发，并把当前拖拽的值作为参数传入
     * @description.en When the slider is dragged, and the current drag value is passed as an argument
     */
    onChange?: (value: number) => void;
    /**
     * @description.zh 滑块拖拽开始时触发，并把当前拖拽的值作为参数传入
     * @description.en When the slider is dragged, and the current drag value is passed as an argument
     */
    onBeforeChange?: (value: number) => void;
    /**
     * @description.zh 与 `touchend` 触发时机一致，把当前值作为参数传入
     * @description.en The same time as `touchend` triggers, and the current value is passed as an argument
     */
    onAfterChange?: (value: number) => void;
    /**
     * @description.zh 滑槽宽度
     * @description.en Track width
     * @default '100%'
     */
    maxTrackWidth?: Property.Width<string | number>;
    /**
     * @description.zh 滑槽高度
     * @description.en Track height
     * @default '4px'
     */
    maxTrackHeight?: Property.Width<string | number>;
    /**
     * @description.zh 滑槽圆角
     * @description.en Track border radius
     * @default '4px'
     */
    maxTrackRadius?: Property.BorderRadius<string | number>;
    /**
     * @description.zh 滑槽颜色
     * @description.en Track color
     * @default '#d8d8d8'
     */
    maxTrackColor?: Property.Background;
    /**
     * @description.zh 滑条最小宽度
     * @description.en Bar min width
     * @default '28px'
     */
    minTrackWidth?: Property.Width<string | number>;
    /**
     * @description.zh 滑条高度
     * @description.en Bar height
     * @default '4px'
     */
    minTrackHeight?: Property.Width<string | number>;
    /**
     * @description.zh 滑条圆角
     * @description.en Bar border radius
     * @default 'inherit'
     */
    minTrackRadius?: Property.BorderRadius<string | number>;
    /**
     * @description.zh 滑条颜色
     * @description.en Track color
     * @default '#158CFB'
     */
    minTrackColor?: Property.Background;
    /**
     * @description.zh 滑块宽度
     * @description.en Slider width
     * @default '28px'
     */
    thumbWidth?: Property.Width<string | number>;
    /**
     * @description.zh 滑块样式
     * @description.en Slider style
     * @default null
     */
    thumbStyle?: React.CSSProperties;
    /**
     * @description.zh 滑块wrap样式
     * @description.en Slider wrap style
     * @default null
     */
    thumbWrapStyle?: React.CSSProperties;
    /**
     * @description.zh 滑块高度
     * @description.en Slider height
     * @default '28px'
     */
    thumbHeight?: string | number;
    /**
     * @description.zh 滑块圆角
     * @description.en Slider radius
     * @default '28px'
     */
    thumbRadius?: string | number;
    /**
     * @description.zh 滑块颜色
     * @description.en Slider color
     * @default '#ffffff'
     */
    thumbColor?: Property.Background;
    /**
     * @description.zh 滑块边框样式
     * @description.en Slider border style
     * @default '0px solid #ffffff'
     */
    thumbBorderStyle?: Property.BorderStyle;
    /**
     * @description.zh 滑块阴影
     * @description.en Slider shadow
     * @default '0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)'
     */
    thumbBoxShadowStyle?: Property.BoxShadow;
    /**
     * @description.zh 是否显示刻度
     * @description.en Whether to display the scale
     * @default false
     */
    isShowTicks?: boolean;
    /**
     * @description.zh 刻度宽度
     * @description.en Tick width of the slider
     * @default '4px'
     */
    tickWidth?: string;
    /**
     * @description.zh 刻度高度
     * @description.en Tick height of the slider
     * @default '12px'
     */
    tickHeight?: string;
    /**
     * @description.zh 刻度圆角
     * @description.en Tick radius of the slider
     * @default '4px'
     */
    tickRadius?: string;
    /**
     * @description.zh 滑槽刻度颜色
     * @description.en Scale color of the slider
     * @default '#158CFB'
     */
    maxTrackTickColor?: string;
    /**
     * @description.zh 滑条刻度颜色
     * @description.en Scale color of the slider
     * @default '#ffffff'
     */
    minTrackTickColor?: string;
    /**
     * @description.en track style
     * @description.zh 轨道样式
     */
    trackStyle?: React.CSSProperties;
    /**
     * @description.en bar style
     * @description.zh 滑条样式
     */
    barStyle?: React.CSSProperties;
    /**
     * @description.en renderType
     * @description.zh 渲染方式
     * @default 'sjs'
     */
    renderType?: 'ray' | 'sjs';
    /**
     * @description.en hideThumb
     * @description.zh 隐藏滑块
     * @default null
     */
    hideThumbButton?: boolean;
    /**
     * @description.en thumbStyleRenderFormatter(sjs only)
     * @description.zh 渲染按钮背景色，例如 "rgb(value,100,100)"，将value替换为滑动值(仅sjs支持)
     * @default null
     */
    thumbStyleRenderFormatter?: Partial<Record<keyof React.CSSProperties, string>>;
    /**
     * @description.en thumbStyleRenderValueScale(sjs only)
     * @description.zh 渲染value时的缩放倍数
     * @default 1
     */
    thumbStyleRenderValueScale?: number;
    /**
     * @description.en thumbStyleRenderValueStart(sjs only)
     * @description.zh 渲染value时的起始值
     * @default 0
     */
    thumbStyleRenderValueStart?: number;
    /**
     * @description.en thumbStyleRenderValueReverse(sjs only)
     * @description.zh 渲染value时反转值
     * @default false
     */
    thumbStyleRenderValueReverse?: boolean;
    /**
     * @description.en enableTouch
     * @description.zh 使用触摸跳跃
     * @default true
     */
    enableTouch?: boolean;
    /**
     * @description.en hidden
     * @description.zh 是否隐藏
     * @default false
     */
    hidden?: boolean;
    /**
     * @description.en parcel
     * @description.zh 包裹滑动条
     * @default false
     */
    parcel?: boolean;
    /**
     * @description.en parcel
     * @description.zh 包裹滑动条间隔
     * @default 0
     */
    parcelMargin?: number;
    /**
     * @description.en The event name when it starts to drag (eventChannel only)
     * @description.zh 开始拖动时的事件名 (eventChannel可用)
     * @default null
     */
    startEventName?: string;
    /**
     * @description.en Incident name when dragging (eventChannel only)
     * @description.zh 正在拖动时的事件名 (eventChannel可用)
     * @default null
     */
    moveEventName?: string;
    /**
     * @description.en The event name when the drag is ended (eventChannel only)
     * @description.zh 结束拖动时的事件名 (eventChannel可用)
     * @default null
     */
    endEventName?: string;
}
export declare const defaultProps: IProps;

[muhai]

1. "@ray-js/components-ty-slider": "0.2.48"
2. 是的，是onAfterChange
3. 0.2.48版本优化了设置steps时，首次渲染step分割线时step分割线会抖动
4. 是的。ios性能会比安卓好，目前是推荐非受控写法，使用onAfterChange

[silverlight]

1. "@ray-js/components-ty-slider": "0.2.48"
2. 是的，是onAfterChange
3. 0.2.48版本优化了设置steps时，首次渲染step分割线时step分割线会抖动
4. 是的。ios性能会比安卓好，目前是推荐非受控写法，使用onAfterChange

好的，谢谢