Question

我想制作一个可以水平和垂直滚动的收藏集视图...。但是我想做类似的事情

https://giphy.com/gifs/lWshqs2BuvilYuE4Fl/html5

从我所看到的像“收藏夹”视图和该“收藏夹”视图顶部的一些分段控件中……我的意思是我唯一的问题是如何从屏幕上的任何位置水平滚动？

就像我不必从顶部细分控件中滚动一样，我也可以从集合视图中滑动它

有什么主意吗？因为我真的不知道我是否正确.....

谢谢

* edit，我不能使用库，所以我想我需要手动完成的事情，对于水平滚动，我需要动态数据，只要我知道，我不知道分页控制器是否可以使用动态数据原因它的静态数据。

Answer 1

使用一个视图控制器
添加一个view2，使其顶部约束和高度达到44
添加滚动视图并提供适当的约束（您可以通过编程或使用Storyborad选择）
为凭证，订阅，密宗添加3个按钮。
为凭证，订阅，密宗创建3个不同的ViewController。
在滚动视图中添加3个视图控制器

$(document).ready(function () {
   const imgUrls = {
      vas:
         "https://images.pexels.com/photos/1596564/pexels-photo-1596564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      anb:
         "https://images.pexels.com/photos/316776/pexels-photo-316776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      tam:
         "https://images.pexels.com/photos/3045635/pexels-photo-3045635.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
   };
   const navItems = $(".nav li");
   const imgBox = $(".banner-img")[0];
   navItems.on("click", function (el) {
      imgBox.src = imgUrls[el.target.id];
   });
});

单击按钮（顶部3个按钮）的功能

// define this variable globally
var previousPageXOffset: CGFloat = 0.0
var pagenumber = 0

// add this in viewdidload
let aViewController = self.storyboard!.instantiateViewController(withIdentifier: "voucher") as! voucher

  let bViewController = self.storyboard!.instantiateViewController(withIdentifier: "subscription") as! subscription
  
  let cViewController = self.storyboard!.instantiateViewController(withIdentifier: "misson") as! misson
  
  let bounds = UIScreen.main.bounds
  let width = bounds.size.width
  let height = CGFloat(1.0)
  
  let viewControllers = [aViewController, bViewController, cViewController]
  
  self.scrollview!.contentSize = CGSize(width: CGFloat(self.totalscreen)*width, height: height)
  
  var idx:Int = 0
  
  for viewController in viewControllers {
      self.addChild(viewController)
      let originX:CGFloat = CGFloat(idx) * width
      viewController.view.frame = CGRect(x: originX, y: 0, width: self.scrollview.frame.width, height: self.scrollview.frame.height)
      self.scrollview!.addSubview(viewController.view)
      print("change")
      viewController.didMove(toParent: self)
      idx+=1
  }

// delegate for scrollview 

extension yourVC: UIScrollViewDelegate{
  
  func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
      
      previousPageXOffset = scrollView.contentOffset.x
  }
  
  func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
      
      let targetOffset = targetContentOffset.pointee
      
      if targetOffset.x == previousPageXOffset {
          // page will not change
      } else if targetOffset.x < previousPageXOffset {
          print("left")
          pagenumber = pagenumber - 1
      } else if targetOffset.x > previousPageXOffset {
          print("ryt")
          pagenumber = pagenumber + 1
      }
      
      if pagenumber <= 0 {
          
          //set buttons colors or bottom line in your case if first page is selected
          
      }else if pagenumber == 1{
          //set buttons colors or bottom line in your case if second page is selected
      }else{
          //set buttons colors or bottom line in your case if third page is selected
      }
      print(pagenumber)
      previousPageXOffset = targetOffset.x
      print(previousPageXOffset)
  }
}

我希望它对您有用：）

Answer 2

将集合视图添加到每个视图控制器（屏幕），并为所需的输出应用Parchment框架。

您可以在以下位置获取有关羊皮纸的更多信息：-https://github.com/rechsteiner/Parchment

附加一些相似的框架（根据您的要求选择）

Swift Collection视图水平和垂直滚动

2 个答案: