在HarmonyOS 6购物比价或电商类应用中做商品图画廊（Swiper），手机/平板触屏滑动切图正常，但部署到 PC模拟器或PC预览器后用鼠标拖图片区域却不切页、无翻页反馈。这不是Swiper Bug——默认情况下 Swiper的鼠标滚轮/鼠标拖（Mouse Swipe）开关未开启或窗口未获焦点，导致鼠标事件被宿主窗口消费。

官方购物比价行业实践FAQ明确两点：① 确保运行窗口获键盘/鼠标焦点（PC预览器点一下窗口）；② 显式开启 Swiper.setSwipeByMouse(true)允许鼠标拖拽触发翻页，必要时配 mouseScroll支持滚轮切图。本文将完整复现问题与标准修复。

一、现象：触屏正常，PC鼠标拖图片不动

1. 问题现场

// ❌ 默认 Swiper，PC 鼠标左键拖图片区域不翻页
Swiper({ loop: true }) {
  ForEach(this.images, (img: Resource) => {
    Image(img).width('100%').height(320).objectFit(ImageFit.Cover)
  })
}
.indicator(true)

• 手机模拟器/真机触屏 → 左右滑正常切图

• PC 预览器 / 云PC 运行 → 鼠标左键在图片上横向拖 → 无翻页、无惯性、偶发整体窗口拖拽感

2. 根因揭秘

二、解决方案：开启鼠标拖拽翻页 + 滚轮切图

完整示例代码

// pages/ProductGalleryPCPage.ets
import { SwiperController } from '@kit.ArkUI';

@Entry
@Component
struct ProductGalleryPCPage {
  private swiperCtrl: SwiperController = new SwiperController();

  private images: Resource[] = [
    $r('app.media.prod_01'),
    $r('app.media.prod_02'),
    $r('app.media.prod_03'),
    $r('app.media.prod_04')
  ];

  // 在 aboutToAppear 或 onAppear 开启鼠标支持
  aboutToAppear() {
    // ✅ 允许鼠标左键拖拽触发 Swiper 翻页
    this.swiperCtrl.setSwipeByMouse(true);
  }

  build() {
    Column() {
      Text('商品图画廊（PC鼠标拖拽/滚轮切图）')
        .fontSize(16)
        .fontColor('#666')
        .margin({ top: 24, bottom: 12 })

      Swiper({
        controller: this.swiperCtrl,
        index: 0,
        indicator: true,
        loop: true
      }) {
        ForEach(this.images, (img: Resource) => {
          Image(img)
            .width('100%')
            .height(320)
            .objectFit(ImageFit.Cover)
        }, (img: Resource) => img.id?.toString() ?? '')
      }
      // ✅ 鼠标滚轮也可切图（向前/后滚翻页）
      .mouseScroll(true)
      .width('90%')
      .height(320)
      .borderRadius(12)
      .clip(true)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F6F8')
    .justifyContent(FlexAlign.Center)
  }
}

关键 API 解读

PC预览器特别提示：运行后先用鼠标单击一下商品图画廊区域或窗口空白使预览器获焦，再拖图测试——这是最常见"设了还不生效"的原因。

三、避坑指南

四、总结：PC鼠标控制Swiper切图 SOP

1. SwiperController 创建后调 controller.setSwipeByMouse(true)（通常在 aboutToAppear）

2. 链式设 .mouseScroll(true)​ 开启滚轮切图

3. PC预览/云IDE运行 → 先单击窗口获焦点再测试鼠标拖图

4. 嵌套手势冲突时确认父容器未抢横向 Pan

核心法则：HarmonyOS 6 中 PC 端 Swiper 鼠标不翻页 = "默认关鼠标拖翻页 → 调 SwiperController.setSwipeByMouse(true)+ mouseScroll(true)，并确保预览窗口获焦"。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任。