关于面板小程序自定义进度条拖动性能问题

[MwM-Mai]

在IDE调试拖动进度时不会进度条变化不会出现延迟，在真机调试的时候拖动进度条时出现延迟

[muhai]

提供一下示例代码。物料广场上的 Slider 组件 有 2 个版本，推荐使用 Sjs 版本，会少一层 React 转小程序的通信成本。

[MwM-Mai]

提供一下示例代码。物料广场上的 Slider 组件 有 2 个版本，推荐使用 Sjs 版本，会少一层 React 转小程序的通信成本。

您好，提供的链接500报错进不去

[muhai]

提供一下示例代码。物料广场上的 Slider 组件 有 2 个版本，推荐使用 Sjs 版本，会少一层 React 转小程序的通信成本。

您好，提供的链接500报错进不去

目前用 React setState 更新方法确实存在 IDE 流畅、真机卡顿的情况，我们还在进一步优化。当前解决的办法是直接操作 dom 来实现动画效果而不是走 React 调度更新，需要利用 Sjs 语法 来操作 dom 节点。

上面链接 500 的话，你可以按下面命令安装尝试：

Code: Select all

yarn add --registry=https://registry.npmjs.org/ @ray-js/components-ty-slider@^0.2.34

示例：

Code: Select all

import SjsSlider from '@ray-js/components-ty-slider/lib/slider';

<SjsSlider
  reverse
  direction="vertical"
  barPad={-4}
  step={1}
  end={value}
  bind:onChange={event => {
    setValue(event.detail.end);
    console.log('onChange', event.detail);
  }}
  bind:onEnd={event => {
    setValue(event.detail.end);
    console.log('onEnd', event.detail);
  }}
  bind:onStart={event => {
    setValue(event.detail.end);
    console.log('onStart', event.detail);
  }}
/>

[MwM-Mai]

提供一下示例代码。物料广场上的 Slider 组件 有 2 个版本，推荐使用 Sjs 版本，会少一层 React 转小程序的通信成本。

您好，提供的链接500报错进不去

目前用 React setState 更新方法确实存在 IDE 流畅、真机卡顿的情况，我们还在进一步优化。当前解决的办法是直接操作 dom 来实现动画效果而不是走 React 调度更新，需要利用 Sjs 语法 来操作 dom 节点。

上面链接 500 的话，你可以按下面命令安装尝试：

Code: Select all

yarn add --registry=https://registry.npmjs.org/ @ray-js/components-ty-slider@^0.2.34

示例：

Code: Select all

import SjsSlider from '@ray-js/components-ty-slider/lib/slider';

<SjsSlider
  reverse
  direction="vertical"
  barPad={-4}
  step={1}
  end={value}
  bind:onChange={event => {
    setValue(event.detail.end);
    console.log('onChange', event.detail);
  }}
  bind:onEnd={event => {
    setValue(event.detail.end);
    console.log('onEnd', event.detail);
  }}
  bind:onStart={event => {
    setValue(event.detail.end);
    console.log('onStart', event.detail);
  }}
/>

我这边使用你提供链接的物料广场组件在真机调试中还是会出现卡顿的情况

[muhai]

您好，提供的链接500报错进不去

目前用 React setState 更新方法确实存在 IDE 流畅、真机卡顿的情况，我们还在进一步优化。当前解决的办法是直接操作 dom 来实现动画效果而不是走 React 调度更新，需要利用 Sjs 语法 来操作 dom 节点。

上面链接 500 的话，你可以按下面命令安装尝试：

Code: Select all

yarn add --registry=https://registry.npmjs.org/ @ray-js/components-ty-slider@^0.2.34

示例：

Code: Select all

import SjsSlider from '@ray-js/components-ty-slider/lib/slider';

<SjsSlider
  reverse
  direction="vertical"
  barPad={-4}
  step={1}
  end={value}
  bind:onChange={event => {
    setValue(event.detail.end);
    console.log('onChange', event.detail);
  }}
  bind:onEnd={event => {
    setValue(event.detail.end);
    console.log('onEnd', event.detail);
  }}
  bind:onStart={event => {
    setValue(event.detail.end);
    console.log('onStart', event.detail);
  }}
/>

我这边使用你提供链接的物料广场组件在真机调试中还是会出现卡顿的情况

注意看 import 那一行，是导入的/lib/slider，看看是不是导入错误？

[MwM-Mai]

目前用 React setState 更新方法确实存在 IDE 流畅、真机卡顿的情况，我们还在进一步优化。当前解决的办法是直接操作 dom 来实现动画效果而不是走 React 调度更新，需要利用 Sjs 语法 来操作 dom 节点。

上面链接 500 的话，你可以按下面命令安装尝试：

Code: Select all

yarn add --registry=https://registry.npmjs.org/ @ray-js/components-ty-slider@^0.2.34

示例：

Code: Select all

import SjsSlider from '@ray-js/components-ty-slider/lib/slider';

<SjsSlider
  reverse
  direction="vertical"
  barPad={-4}
  step={1}
  end={value}
  bind:onChange={event => {
    setValue(event.detail.end);
    console.log('onChange', event.detail);
  }}
  bind:onEnd={event => {
    setValue(event.detail.end);
    console.log('onEnd', event.detail);
  }}
  bind:onStart={event => {
    setValue(event.detail.end);
    console.log('onStart', event.detail);
  }}
/>

我这边使用你提供链接的物料广场组件在真机调试中还是会出现卡顿的情况

注意看 import 那一行，是导入的/lib/slider，看看是不是导入错误？

好的，感谢