一. 基本原理
-
创建五个页面
image.png
实现：0页面向右滑动为2页面，2页面向坐滑动为0页面
- 对UIScrollView 时刻监听回调
- 在合适的位置进行逻辑跳转
二. 实现
- 创建页面
let scrollView = UIScrollView(frame: CGRect(x: 0, y: 50, width: 414, height: 200)) // Frame属性
scrollView.contentSize = CGSize(width: 414*5, height: 200) // ContentSize属性
scrollView.backgroundColor = .gray
view.addSubview(scrollView)
scrollView.indicatorStyle = .default
scrollView.isPagingEnabled = true
for i in 0..<5 { // for循环添加lable
let floatX = 414*i
let lable = UILabel(frame: CGRect(x: floatX, y: 0, width: 414, height: 50))
lable.backgroundColor = .red
lable.text = "\((i+2)%3)"
scrollView.addSubview(lable)
}
scrollView.contentOffset.x = 414 // 设置第一个页面为0页面
scrollView.delegate = self
- 设置监听回调及跳转
extension ViewController: UIScrollViewDelegate {
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let floatX = scrollView.contentOffset.x
if(floatX == 414*4) {
let newPoint = CGPoint(x: 414, y: 0)
scrollView.contentOffset = newPoint // 当滑动到第五个页面 跳转到第二个页面
}else if(floatX == 0) {
let newPoint = CGPoint(x: 414*3, y: 0)
scrollView.contentOffset = newPoint // 当滑动到第一个页面 跳转到第四个页面
}
}
}
- 设置UIPageControl
// 初始化pageControl
topNewsPageControl = UIPageControl(frame: CGRect(x: 0, y: 175, width: Device.width, height: 20))
topNewsPageControl.numberOfPages = 5
topNewsPageControl.currentPage = 0
topNewsPageControl.backgroundColor = .clear
self.view.addSubview(topNewsPageControl)
---未完待续---
