你是否也遇到过这个效果,嵌套滚动? 如何实现呢

image.gif

\

首先,我们知道,这一定一个嵌套滚动的问题.
基础的页面搭建不再赘述,直接阐述解决办法.

通过手势穿透,即让一个滑动手势既作用于底层的ScrollView又能作用于上层的业务tableView,同时控制他们的滚动即可达成目的。

• 比如说外层是一个TableView,我们让外层这个TableView实现UIGestureRecognizerDelegate的这个shouldRecognizeSimultaneouslyWith方法,当滚动的是tag为100的view时,返回true,也就是这个view也能响应到滚动事件

class TKGestureTableView: UITableView, UIGestureRecognizerDelegate {
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        if let otherView = otherGestureRecognizer.view {
            if otherView.tag == 100 {
                return true
            }
        }
        return false
    }
    
}

• 然后内层的tablView设置一个tag = 100

 lazy var listView:UITableView = {
        let tableView = UITableView()
        tableView.delegate = self
        tableView.dataSource = self
        tableView.rowHeight = UITableView.automaticDimension
        tableView.register(InnerNormalCell.classForCoder(), forCellReuseIdentifier: "InnerNormalCell")
        tableView.estimatedRowHeight = 40
        tableView.tag = 100
        return tableView
    }()

• 这样,当用户滑动底部的时候,两个view的滚动事件是都可以监听到的;然后通过控制两个内外两个View的滚动事件,完成上面的gif效果

外层的滚动

  var isTopAndCanNotMoveTabViewPre:Bool = false
    var isTopAndCanNotMoveTabView:Bool = false
    var canScroll:Bool = false
    

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        print("out---\(scrollView.contentOffset)")
        ///吸顶效果
        let offsetY = scrollView.contentOffset.y
            let tabOffsetY:CGFloat = CGFloat(Int(listView.rectForRow(at: IndexPath(row: 4, section: 0)).origin.y))
            isTopAndCanNotMoveTabViewPre = isTopAndCanNotMoveTabView
            if offsetY >= tabOffsetY {
                scrollView.contentOffset = CGPoint(x: 0, y: tabOffsetY)
                isTopAndCanNotMoveTabView = true
            }else {
                isTopAndCanNotMoveTabView = false
            }
            if (isTopAndCanNotMoveTabView != isTopAndCanNotMoveTabViewPre){
                if (!isTopAndCanNotMoveTabViewPre && isTopAndCanNotMoveTabView) {
                    //上滑-滑动到顶端
                    print("out---上滑-滑动到顶端--\(scrollView.contentOffset)")
                    NotificationCenter.default.post(name: Notification.Name.goTopNotificationName, object: nil, userInfo: ["canScroll":"1"])
                    canScroll = false
                }
                if(isTopAndCanNotMoveTabViewPre && !isTopAndCanNotMoveTabView){
                    //下滑-离开顶端
                    print("out---下滑-离开顶端--\(scrollView.contentOffset)")
                    if (!canScroll) {
                        scrollView.contentOffset = CGPoint(x: 0, y: tabOffsetY)
                    }
                }
            }
        
    }

外层的监听 及 响应

//建立通知中心 监听离开置顶命令
        NotificationCenter.default.addObserver(self, selector: #selector(acceptMsg(notification:)), name: Notification.Name.leaveTopNotificationName, object: nil)
        //建立通知中心 监听进入置顶命令
        NotificationCenter.default.addObserver(self, selector: #selector(acceptMsg(notification:)), name: Notification.Name.goTopNotificationName, object: nil)

/// 接收到通知的回调
    ///
    /// - Parameter notification:
    @objc func acceptMsg(notification: Notification) {
        let notificationName = notification.name
        if notificationName == Notification.Name.goTopNotificationName {//到达已经吸顶部分
            if let canScroll_str = notification.userInfo?["canScroll"] as? String {
                if canScroll_str == "1" {
                    canScroll = false
                }
            }
        }else if notificationName == Notification.Name.leaveTopNotificationName {//离开吸顶部分
            listView.contentOffset = CGPoint.zero
            canScroll = true
        }
    }
    

内层的滚动

 func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if (!InnerScrollerViewController.canScroll) {
            scrollView.contentOffset = CGPoint.zero
        }
        let offsetY = scrollView.contentOffset.y
        if (offsetY < 0) {
            print("inner---下拉--\(scrollView.contentOffset)")
            NotificationCenter.default.post(name: Notification.Name.leaveTopNotificationName, object: nil, userInfo: ["canScroll":"1"])
        }else{
            print("inner---上滑--\(scrollView.contentOffset)")
        }
    }

内层的监听 及 响应

       NotificationCenter.default.addObserver(self, selector: #selector(acceptMsg(notification:)), name: Notification.Name.leaveTopNotificationName, object: nil)
       NotificationCenter.default.addObserver(self, selector: #selector(acceptMsg(notification:)), name: Notification.Name.goTopNotificationName, object: nil)

/// 接收到通知的回调
   ///
   /// - Parameter notification:
   @objc func acceptMsg(notification: Notification) {
       let notificationName = notification.name
       if notificationName == Notification.Name.goTopNotificationName {
           if let canScroll_str = notification.userInfo?["canScroll"] as? String {
               if canScroll_str == "1" {
                   InnerScrollerViewController.canScroll = true
               }
           }
       }else if notificationName == Notification.Name.leaveTopNotificationName {
           listView.contentOffset = CGPoint.zero
           InnerScrollerViewController.canScroll = false
       }
   }

详见:
https://github.com/bjduhuan/NestedScrollingTest.git

对您有帮助的话,欢迎点点小心心~