uni-app slider的touch对象为空？

示例代码：

sliderChange(e) {  
    console.log('e.detail.value:', e);  
    // const num = parseInt(e.detail.value, 10);  
    // const domSilder = uni.createSelectorQuery().select(".slider-item");  
    // const offsetLeft = e.changedTouches[0].target.offsetLeft;  
    // // 这个 14 是那个圆球的宽度  
    // const sliderCurrWidth = 14;  
    // this.current = num;  
    // this.sliderOffsetLeft = offsetLeft + sliderCurrWidth;  
},

操作步骤：

无

预期结果：

获得到 offsetleft

实际结果：

为空

bug描述：

在App中，点击 Slider 拖动中，为什么 touches 对象为空。这样我就无法得到滑动的圆球于左侧的offsetLeft距离。

信息类别	详细信息
产品分类	uniapp/App
PC开发环境	Windows
PC开发环境版本	10
HBuilderX类型	正式
HBuilderX版本	3.2.16
手机系统	Android
手机系统版本	Android 12
手机厂商	小米
手机机型	红米
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

更多关于uni-app slider的touch对象为空？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼

更多关于uni-app slider的touch对象为空？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app 中，slider 组件的 change 事件返回的 event 对象与原生 touch 事件不同，它不包含 changedTouches 或 target 属性。因此，直接通过 e.changedTouches[0].target.offsetLeft 获取 offsetLeft 会失败，导致 touches 对象为空。

解决方案：

使用 uni.createSelectorQuery() 获取 slider 的布局信息：通过选择器查询 slider 节点的位置信息，替代依赖 touch 事件的方式。

修改代码示例：

sliderChange(e) {
    console.log('e.detail.value:', e.detail.value);
    const num = parseInt(e.detail.value, 10);
    this.current = num;
    
    // 使用 uni.createSelectorQuery 获取 slider 的布局信息
    uni.createSelectorQuery().select(".slider-item").boundingClientRect(rect => {
        if (rect) {
            // rect.left 即为 slider 相对于视窗左侧的距离
            this.sliderOffsetLeft = rect.left + 14; // 14 为圆球宽度
            console.log('sliderOffsetLeft:', this.sliderOffsetLeft);
        }
    }).exec();
}