美文网首页iOS-VendoriOS带我飞2
类似淘宝首页轮播图的实现

类似淘宝首页轮播图的实现

作者: 鋒芒毕露 | 来源:发表于2015-10-16 10:36 被阅读1356次

首页先上效果图


1.gif

主要功能:

  • 实现自动轮播与手动切换模式
  • 设置自动轮播时间
  • 支持点击事件

1.创建3个View,分别用来显示前一张照片、当前照片、后一张照片

    if (_currentPage==0) {
    _firstView = [_imageArray lastObject];
    _middleView = [_imageArray objectAtIndex:_currentPage];
    _lastView = [_imageArray objectAtIndex:_currentPage+1];
  }
  else if (_currentPage == _imageArray.count-1)
  {
    _firstView = [_imageArray objectAtIndex:_currentPage-1];
    _middleView = [_imageArray objectAtIndex:_currentPage];
    _lastView = [_imageArray firstObject];
  }
  else
  {
    _firstView = [_imageArray objectAtIndex:_currentPage-1];
    _middleView = [_imageArray objectAtIndex:_currentPage];
    _lastView = [_imageArray objectAtIndex:_currentPage+1];
  }

  //设置三个view的frame,加到scrollview上
  _firstView.frame = CGRectMake(0, 0, kViewWidth, KViewHeight);
  _middleView.frame = CGRectMake(kViewWidth, 0, kViewWidth, KViewHeight);
  _lastView.frame = CGRectMake(kViewWidth*2, 0, kViewWidth, KViewHeight);

  [_scrollView addSubview:_firstView];
  [_scrollView addSubview:_middleView];
  [_scrollView addSubview:_lastView];
  //显示中间的那一张图片,也就是CurrentPage
   _scrollView.contentOffset = CGPointMake(kViewWidth, 0);

2.实现ScorollView的代理方法,在停止拖拽的时候调用

  -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//手动滑动时候暂停自动替换
[_autoScrollTimer invalidate];
_autoScrollTimer = nil;
_autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:_timeInterval target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];

//得到当前页数
float x = _scrollView.contentOffset.x /kViewWidth;
//往前翻
if (x <= 0) {
    if (_currentPage-1 < 0) {
        _currentPage = _imageArray.count-1;
    }else{
        _currentPage --;
    }
}
//往后翻
if (x >= 2) {
    if (_currentPage == _imageArray.count-1) {
        _currentPage = 0;
    }else{
        _currentPage ++;
    }
}
self.isDragging = YES;
[self reloadData];
}  

3.实现定时器自动滚动

-(void)setIsAutoScroll:(BOOL)isAutoScroll
{
_isAutoScroll = isAutoScroll;

if (isAutoScroll) {  
    if (!_autoScrollTimer) {
        _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:_timeInterval target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];
    }
}else {  
    if (_autoScrollTimer.isValid) {
        [_autoScrollTimer invalidate];
        _autoScrollTimer = nil;
    }
}

4.定时器执行的自动切换的方法

-(void)autoShowNextImage
{
if (_currentPage == _imageArray.count-1) {
    _currentPage = 0;
}else{
    _currentPage ++;
}
[self reloadData];  //更新数据、重新展示

}

5.动画优化
设立一个标志位isDragging,默认不拖拽的情况下isDragging为NO,执行切换动画。
在调用scrollViewDidEndDecelerating:(UIScrollView *)scrollView后设置isDragging为YES,不执行动画。

if (!self.isDragging) {
        _scrollView.contentOffset = CGPointMake(0, 0);
        [UIView animateWithDuration:0.5 animations:^{
            _scrollView.contentOffset = CGPointMake(kViewWidth, 0);
        } completion:^(BOOL finished) {
        }];
    }else
    {
        _scrollView.contentOffset = CGPointMake(kViewWidth, 0);
        self.isDragging = NO;
    }

6.代理的实现,监听点击事件,回传CurrentPage

_tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
_tapGesture.numberOfTapsRequired = 1;
_tapGesture.numberOfTouchesRequired = 1;
[_scrollView addGestureRecognizer:_tapGesture];

-(void)handleTap:(UITapGestureRecognizer*)sender
{
if ([self.delegate respondsToSelector:@selector(didClickPage:atIndex:)]) {
    [self.delegate didClickPage:self atIndex:_currentPage];
  }
}

7.最后附上Demo的github地址,欢迎大家Star
github项目地址

相关文章

  • 类似淘宝首页轮播图的实现

    首页先上效果图 主要功能: 实现自动轮播与手动切换模式 设置自动轮播时间 支持点击事件 1.创建3个View,分别...

  • 项目分解

    首页### 轮播图实现 最新收益滚动 公告列表 产品3张不规则大图。 产品小图列表 单张广告图 发现### 轮播图...

  • 前端滚动轮播实现

    内容:实现滚动轮播-给非前端人员观看的前言:轮播的具体实现有很多种方式,下面主要讲一下我是怎么实现的。 淘宝网首页...

  • 仿拉勾网微信小程序

    2019年12月29日 一.首页略 二.言职模块略 1.实现原理,用swiper 类似轮播图,只是不显示点点点等逻...

  • Axure动态面板实现banner的轮播效果

    一般我们在逛淘宝的时候,首页会有很多图片来回播放,那就是轮播图,如果我们想要实现这个效果难不难?当然不难,Axur...

  • 小程序轮播图

    | 微信小程序轮播图实现,实现在首页上轮播图,让效果更好看。查看微信小程序开发文档可知,微信小程序提供swiper...

  • react-native版知乎日报APP(四) 页面功能实现

    本节主要说明 部分页面的逻辑功能实现 . Home (首页) 首页包含的功能点有 : 弹出菜单 , 轮播图 ...

  • tableview1的headerview覆盖底部的tablev

    项目需求,首页要实现一个,最底部是轮播图,上面是个tableview列表。不滑动的时候让底部轮播图响应点击和滑动事...

  • 电商api开源接口

    首页相关的数据接口 轮播的接口 首页的轮播图 请求的url http://vueshop.glbuys.com/a...

  • Android轮播图控件的实现详解(附GitHub开源链接)

    轮播图在Android开发中是非常常见的控件,一般App的首页广告和电商类App的商品详情图片都会用轮播图来实现。...

网友评论

本文标题:类似淘宝首页轮播图的实现

本文链接:https://www.haomeiwen.com/subject/bbqacttx.html