uni-app slider设置步长为0.05滑动会出现精度问题

uni-app slider设置步长为0.05滑动会出现精度问题

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

win11 26200.7019

HBuilderX类型：

正式

HBuilderX版本号：

4.85

手机系统：

Android

手机系统版本号：

Android 16

手机厂商：

小米

手机机型：

11pro

页面类型：

vue

vue版本：

vue2

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

<slider min="0.1" max="3" :value="audioSpeed" step="0.05" activeColor="#61bc55" @change="onAudioSpeedChange" @changing="onAudioSpeedChange" show-value/>

操作步骤：

<slider min="0.1" max="3" :value="audioSpeed" step="0.05" activeColor="#61bc55" @change="onAudioSpeedChange" @changing="onAudioSpeedChange" show-value/>

预期结果：

0.05 为单位

实际结果：

2.3000000000000003


更多关于uni-app slider设置步长为0.05滑动会出现精度问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

提供一下临时解决方案，把下方附件内容替换到
/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/uni-app-plus

更多关于uni-app slider设置步长为0.05滑动会出现精度问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


覆盖app组件后app可以了，H5的也需要…

回复 5***@qq.com: 那等我再给你打个包

0.05 这个浮点数 , 本身 存储的 时候 , 会 丢 精度的

H5 的临时解决方案

感谢

这是由于JavaScript浮点数精度问题导致的常见现象。在JavaScript中，浮点数运算存在精度丢失问题，当使用0.05作为步长时，累加计算会产生类似2.3000000000000003的精度误差。

解决方案：

  1. 显示时格式化：在显示数值时进行四舍五入处理
onAudioSpeedChange(e) {
  const value = parseFloat(e.detail.value);
  this.audioSpeed = Math.round(value * 100) / 100; // 保留两位小数
}
  1. 使用整数计算：将数值转换为整数处理
// 将范围转换为整数：0.1-3 → 10-300，步长5
<slider min="10" max="300" :value="audioSpeed * 100" step="5" @change="onAudioSpeedChange"/>

onAudioSpeedChange(e) {
  this.audioSpeed = parseFloat(e.detail.value) / 100;
}
  1. 使用toFixed方法：
onAudioSpeedChange(e) {
  this.audioSpeed = parseFloat(parseFloat(e.detail.value).toFixed(2));
}
回到顶部