uni-app slider组件在IOS nvue中中间点与手指触碰位置不一致

我也是这个问题，而且 step 不能设置小于 1 的值。

在处理uni-app中nvue（NativeScript Vue）环境下的slider组件时，如果在iOS平台上遇到中间点与手指触碰位置不一致的问题，这通常与原生组件的渲染和事件处理有关。以下是一个可能的解决方案，通过自定义slider组件来更精确地控制触摸事件和位置显示。

首先，我们需要创建一个自定义的slider组件。由于nvue支持直接使用Vue语法结合原生组件，我们可以利用这一点来更精细地处理触摸事件。

自定义Slider组件示例

1. 创建自定义Slider组件 (MySlider.nvue)

<template>
  <view class="container">
    <view 
      class="slider-track" 
      :style="{ width: sliderWidth + 'px' }"
    >
      <view 
        class="slider-thumb" 
        :style="{ left: thumbPosition + 'px' }"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      thumbPosition: 0,
      startX: 0,
      sliderWidth: 300, // 假设slider宽度为300px
      currentValue: 0
    };
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX - this.$refs.thumb.offsetLeft;
    },
    onTouchMove(e) {
      let newX = e.touches[0].clientX - this.startX;
      newX = Math.max(0, Math.min(newX, this.sliderWidth));
      this.thumbPosition = newX;
      this.currentValue = newX / this.sliderWidth; // 计算当前值
    },
    onTouchEnd() {
      // 可以在这里处理值变化后的逻辑
      console.log('Current Value:', this.currentValue);
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 50px;
  position: relative;
}
.slider-track {
  width: 100%;
  height: 100%;
  background-color: #ddd;
  position: relative;
}
.slider-thumb {
  width: 50px;
  height: 100%;
  background-color: #007aff;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 5px;
}
</style>

使用自定义Slider组件

在你的页面或组件中引入并使用这个自定义的slider组件：

<template>
  <view>
    <MySlider />
  </view>
</template>

<script>
import MySlider from '@/components/MySlider.nvue';

export default {
  components: {
    MySlider
  }
};
</script>

上述代码提供了一个基本的自定义slider组件实现，通过监听touchstart、touchmove和touchend事件来手动控制thumb的位置，并确保其位置与手指触摸位置一致。这种方法绕过了直接使用uni-app内置slider组件可能存在的平台兼容性问题。