ScrollView 之 实现视图的循环显示

视图的循环现实一般采用的是412341的方法,先面试例子

#import "ViewController.h"
#define imageWidth     300
#define imageHeight    450
@interface ViewController ()<UIScrollViewDelegate>
{
    NSArray * _sourceArray;
    UIScrollView * _scrollView;
    UIPageControl * _pageControl;
}
@end

@implementation ViewController

-(void)loadView{
    [super loadView];
    
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    _sourceArray = [NSArray arrayWithObjects:@"A.png",@"B.png",@"C.png",@"E.png", @"F.png",@"G.png",@"H.png",@"I.png",@"J.png",@"K.png",@"L.png",@"M.png",nil];

    _scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(10, 20, imageWidth, imageHeight)];
    _scrollView.delegate = self;
    _scrollView.pagingEnabled = YES;
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.showsVerticalScrollIndicator = NO;
    _scrollView.contentSize = CGSizeMake(imageWidth*([_sourceArray count]+2), imageHeight);
    [self.view addSubview:_scrollView];
    
    UIImageView * firstImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, imageWidth, imageHeight)];
    firstImage.image = [UIImage imageNamed:[_sourceArray lastObject]];
    [_scrollView addSubview:firstImage];
    
    for (int i = 1; i <= [_sourceArray count]; i++) {
        
        UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(i*imageWidth, 0, imageWidth, imageHeight)];
        imageView.image = [UIImage imageNamed:[_sourceArray objectAtIndex:i - 1]];
        [_scrollView addSubview:imageView];
    }
    
    UIImageView * lastImage = [[UIImageView alloc]initWithFrame:CGRectMake(([_sourceArray count]+1)*imageWidth, 0, imageWidth, imageHeight)];
    lastImage.image = [UIImage imageNamed:[_sourceArray objectAtIndex:0]];
    [_scrollView addSubview:lastImage];
    [_scrollView scrollRectToVisible:CGRectMake(imageWidth, 0, imageWidth, imageHeight) animated:NO];
    
    _pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, _scrollView.frame.origin.y + _scrollView.frame.size.height - 20, imageWidth, 20)];
    _pageControl.numberOfPages = _sourceArray.count;
    _pageControl.currentPage = 0;
    _pageControl.enabled = YES;
    [self.view addSubview:_pageControl];

	
}



-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    int currentPage = scrollView.contentOffset.x/imageWidth;
    if (currentPage == [_sourceArray count]+1) {
        [_scrollView scrollRectToVisible:CGRectMake(imageWidth, 0, imageWidth, imageHeight) animated:NO];
        _pageControl.currentPage = 0;
        
       
    }else if (currentPage == 0){
        [_scrollView scrollRectToVisible:CGRectMake(imageWidth*([_sourceArray count]), 0, imageWidth, imageHeight) animated:NO];
        _pageControl.currentPage = _sourceArray.count - 1;
        
    }else{
        _pageControl.currentPage = currentPage - 1;
    }

}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end


上面就是实现的所有代码,主要就是用到了scrollview的一个代理方法,和scrollview的一个scrollRectToVisible:方法。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中的scroll-view组件是用来实现滚动视图的,但默认情况下并不支持循环滚动。如果需要实现循环滚动,我们可以通过一些自定义的方式来实现实现循环滚动的基本思路是在scroll-view组件外面放置一个容器,并在容器中复制一份完整的内容,并且在容器的开始和结束处分别添加一份内容的副本。通过设置容器的宽度为原始内容的宽度加上一份内容的副本的宽度,来实现循环滚动的效果。 具体实现的步骤如下: 1. 在scroll-view组件外部添加一个容器,例如使用view组件包裹scroll-view组件。 2. 获取原始内容的宽度,可以使用小程序的API来获取元素的宽度,如wx.createSelectorQuery().select('#id').boundingClientRect() 3. 复制一份完整的内容,并在容器的开始和结束处分别添加一份内容的副本。 4. 设置容器的宽度为原始内容的宽度加上一份内容的副本的宽度。 5. 在scroll-view组件的bindscroll事件中,通过监听滚动的偏移量,当滚动偏移量超过容器的宽度时,将scroll-view的滚动到对应的位置,并且将滚动偏移量重置为0,实现循环滚动的效果。 需要注意的是,滚动的速度要快于内容的切换,否则会出现内容错乱的情况。同时,由于scroll-view组件在滚动到边缘时会有一定的滚动回弹效果,所以在滚动到容器的开始和结束处时会有一小段回弹效果,可以根据具体的需求进行调整和优化。 总结起来,通过在scroll-view组件外部添加一个容器,在容器中复制一份完整的内容并设置容器的宽度,以及通过监听滚动事件来实现滚动偏移量的调整,就可以实现微信小程序中scroll-view的循环滚动效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值