Swift-UIScrollView应用案例: 循环滚动(新闻轮

2018-11-10  本文已影响0人  给点阳光我就灿烂_ab56

一. 基本原理

  1. 创建五个页面


    image.png

    实现:0页面向右滑动为2页面,2页面向坐滑动为0页面

  2. 对UIScrollView 时刻监听回调
  3. 在合适的位置进行逻辑跳转

二. 实现

  1. 创建页面
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
  1. 设置监听回调及跳转
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   // 当滑动到第一个页面 跳转到第四个页面
        }
    }
}
  1. 设置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)

---未完待续---

上一篇下一篇

猜你喜欢

热点阅读