WKWebView多图画廊与UIPageViewController滑动冲突解决方案求助

这个问题本质是手势识别优先级冲突——UIPageViewController的内置翻页手势和WKWebView里画廊的滑动手势（通常是WebView内部的scrollView手势）会互相干扰。下面给你两种经过验证的可行方案，你可以根据自己的场景选择：

方案一：通过JS交互精准控制（推荐） #

这种方法最可靠，因为只有网页端的JS能准确知道当前画廊是否处于边缘位置。核心思路是：让网页JS监听画廊的滑动状态，当滑到第一张/最后一张时通知原生代码，再由原生决定是否启用UIPageViewController的翻页手势。

实现步骤： #

1. 给WKWebView注入监听JS
   在WebView加载完成后，注入一段JS代码来监听画廊的滚动事件。假设你的画廊是一个横向滚动的容器（比如div.gallery-container），代码大致如下：

   func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
       let js = """
           const gallery = document.querySelector('.gallery-container');
           if (gallery) {
               gallery.addEventListener('scroll', () => {
                   const isAtLeftEdge = gallery.scrollLeft <= 0;
                   const isAtRightEdge = gallery.scrollLeft + gallery.clientWidth >= gallery.scrollWidth;
                   window.webkit.messageHandlers.galleryEdgeHandler.postMessage({
                       isAtLeftEdge: isAtLeftEdge,
                       isAtRightEdge: isAtRightEdge
                   });
               });
               // 初始状态检查
               const isAtLeftEdge = gallery.scrollLeft <= 0;
               const isAtRightEdge = gallery.scrollLeft + gallery.clientWidth >= gallery.scrollWidth;
               window.webkit.messageHandlers.galleryEdgeHandler.postMessage({
                   isAtLeftEdge: isAtLeftEdge,
                   isAtRightEdge: isAtRightEdge
               });
           }
       """
       webView.evaluateJavaScript(js)
   }
   

2. 原生端接收JS消息
   先配置WKWebView的configuration，添加消息处理器：

   let config = WKWebViewConfiguration()
   config.userContentController.add(self, name: "galleryEdgeHandler")
   let webView = WKWebView(frame: .zero, configuration: config)
   

   然后实现WKScriptMessageHandler协议，根据JS传来的状态控制UIPageViewController的手势：

   func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
       guard let body = message.body as? [String: Bool],
             let isAtLeftEdge = body["isAtLeftEdge"],
             let isAtRightEdge = body["isAtRightEdge"] else { return }
       
       // 获取UIPageViewController的内置翻页手势
       if let pagePanGesture = pageViewController.gestureRecognizers?.first(where: { $0 is UIPanGestureRecognizer }) {
           // 逻辑：左滑切换页面仅在画廊处于最左侧时允许；右滑切换仅在画廊处于最右侧时允许
           let translation = (pagePanGesture as! UIPanGestureRecognizer).translation(in: view)
           if translation.x > 0 {
               // 左滑（切换上一页）
               pagePanGesture.isEnabled = isAtLeftEdge
           } else {
               // 右滑（切换下一页）
               pagePanGesture.isEnabled = isAtRightEdge
           }
       }
   }
   

方案二：通过手势识别器代理拦截（无需JS） #

如果不想和网页端交互，可以通过拦截UIPageViewController的手势，判断滑动是否来自WebView的非边缘区域。这种方法依赖WebView内部scrollView的状态：

实现步骤： #

1. 获取UIPageViewController的手势并设置代理
   在你的UIPageViewController初始化后，找到它的内置pan手势，设置代理：

   class YourPageViewController: UIPageViewController, UIGestureRecognizerDelegate {
       override func viewDidLoad() {
           super.viewDidLoad()
           // 找到翻页手势
           if let panGesture = gestureRecognizers?.first(where: { $0 is UIPanGestureRecognizer }) {
               panGesture.delegate = self
           }
       }
   }
   

2. 在代理方法中判断是否允许手势触发
   实现gestureRecognizerShouldBegin方法，根据当前显示的ViewController里的WebView scrollView状态来决定：

   func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
       guard let currentVC = viewControllers?.first as? YourWebViewController,
             let scrollView = currentVC.webView.scrollView else { return true }
       
       // 判断WebView的水平滚动是否处于边缘
       let isAtLeftEdge = scrollView.contentOffset.x <= 0
       let isAtRightEdge = scrollView.contentOffset.x + scrollView.frame.width >= scrollView.contentSize.width
       
       // 逻辑：只有当WebView处于对应方向的边缘时，才允许UIPageViewController的手势触发
       if gestureRecognizer is UIPanGestureRecognizer {
           let translation = (gestureRecognizer as! UIPanGestureRecognizer).translation(in: view)
           if translation.x > 0 {
               // 左滑（切换上一页）：仅画廊在最左侧时允许
               return isAtLeftEdge
           } else {
               // 右滑（切换下一页）：仅画廊在最右侧时允许
               return isAtRightEdge
           }
       }
       return true
   }
   

注意事项： #

• 方案二中，如果你的画廊是网页内部的自定义滚动（不是用原生scrollView），这种方法可能不准确，此时方案一更合适。
• 记得在WebView销毁时移除JS消息处理器，避免内存泄漏：config.userContentController.removeScriptMessageHandler(forName: "galleryEdgeHandler")

内容的提问来源于stack exchange，提问作者rajat yadav