uni-app uni-swipe-action组件在内置浏览器的pC模式无法滑动

uni-app uni-swipe-action组件在内置浏览器的pC模式无法滑动

操作步骤：

  • 在hbuildx内置浏览器的PC端测试滑动

预期结果：

  • 可以滑动

实际结果：

  • 无法滑动

bug描述：

  • uni-swipe-action组件在内置浏览器的PC模式无法滑动，在APP和内置浏览器的其他手机尺寸测试都可以，vue2版本

| 开发环境         | 版本号   | 项目创建方式 |
|------------------|----------|--------------|
| Windows          | win7     | HBuilderX    |
| HBuilderX        | 4.65     |              |
| Chrome           |          |              |

更多关于uni-app uni-swipe-action组件在内置浏览器的pC模式无法滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni-swipe-action组件在内置浏览器的pC模式无法滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是uni-swipe-action组件在HBuilderX内置浏览器PC模式下的已知兼容性问题。由于PC模式下触控事件与移动端不同，导致滑动失效。

解决方案：

  1. 在PC模式下添加鼠标事件支持：
mounted() {
    if(uni.getSystemInfoSync().platform === 'pc') {
        this.$el.addEventListener('mousedown', this.handleMouseDown);
        this.$el.addEventListener('mousemove', this.handleMouseMove);
        this.$el.addEventListener('mouseup', this.handleMouseUp);
    }
}
  1. 或者直接使用条件编译区分平台：
<template>
    <!-- #ifdef H5 -->
    <div v-if="isPC" class="pc-swipe">
        <!-- PC端替代方案 -->
    </div>
    <!-- #endif -->
    
    <uni-swipe-action v-else>
        <!-- 正常内容 -->
    </uni-swipe-action>
</template>
回到顶部