广告
返回顶部
首页 > 资讯 > 移动开发 >iOS实现循环滚动公告栏
  • 829
分享到

iOS实现循环滚动公告栏

iOS滚动公告栏 2022-05-31 19:05:21 829人浏览 八月长安
摘要

本文实例为大家分享了iOS实现循环滚动公告栏的具体代码,供大家参考,具体内容如下 封装了一个继承于UIView的类,如下: #import <UIKit/UIKit.h&g

本文实例为大家分享了iOS实现循环滚动公告栏的具体代码,供大家参考,具体内容如下

封装了一个继承于UIView的类,如下:


#import <UIKit/UIKit.h>
 
NS_ASSUME_NONNULL_BEGIN
@interface XtayNoticeScrollView : UIView
 
- (instancetype)initWithFrame:(CGRect)frame titleArray:(NSArray<NSString *> *)titleArray; 
- (void)openTimer;    
- (void)closeTimer;
 
@end
 
NS_ASSUME_NONNULL_END

#define ROW_H  self.bounds.size.height
 
#import "XtayNoticeScrollView.h"
 
@interface XtayNoticeScrollView ()
 
/// scrollView
@property (nonatomic, strong) UIScrollView *bgScrollView;
/// titleArr
@property (nonatomic, copy) NSArray *titleArr;
/// timer
@property (nonatomic, strong) NSTimer *scrollTimer;
 
@end
 
@implementation XtayNoticeScrollView
 
- (instancetype)initWithFrame:(CGRect)frame titleArray:(NSArray<NSString *> *)titleArray {
  self = [super initWithFrame:frame];
  if (self) {
    self.titleArr = titleArray;
    [self addSubview:self.bgScrollView];
    [self createBaseView];
    [self openTimer];
  }
  return self;
}
 
// MARK: - 开启定时器
- (void)openTimer {
  if (!_scrollTimer) {
    _scrollTimer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(timerMoved) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:_scrollTimer fORMode:NSRunLoopCommonModes];
  }
}
 
// MARK: - 关闭定时器
- (void)closeTimer {
  [_scrollTimer invalidate];
  _scrollTimer = nil;
}
 
- (UIScrollView *)bgScrollView {
  if (!_bgScrollView) {
    _bgScrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
    _bgScrollView.scrollEnabled = NO;
    _bgScrollView.showsVerticalScrollIndicator = NO;
    _bgScrollView.showsHorizontalScrollIndicator = NO;
    _bgScrollView.backgroundColor = UIColor.whiteColor;
  }
  return _bgScrollView;
}
 
// MARK: - 创建所有视图
- (void)createBaseView {
  // 安全判断
  if (self.titleArr.count == 0) {
    return;
  }
  // 为了展示滑动过程的流畅性,重新处理数组
  NSMutableArray *dataMArray = [NSMutableArray arrayWithCapacity:0];
  [dataMArray addObjectsFromArray:_titleArr];
  [dataMArray addObject:_titleArr.firstObject];
  for (int i = 0; i<dataMArray.count; i++) {
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, ROW_H*(i%dataMArray.count), self.bgScrollView.bounds.size.width, ROW_H)];
    label.text = dataMArray[i];
    label.font = [UIFont systemFontOfSize:15];
    label.textColor = [UIColor blackColor];
    label.numberOfLines = 0;
    [_bgScrollView addSubview:label];
  }
  _bgScrollView.contentSize = CGSizeMake(0, ROW_H*dataMArray.count);
}
 
// MARK: - 定时器调用方法
- (void)timerMoved {
  CGFloat pageY = self.bgScrollView.contentOffset.y/ROW_H;
  int pageIntY = pageY;
  if (pageIntY >= self.titleArr.count) {
    [self.bgScrollView setContentOffset:CGPointMake(0, 0) animated:NO];
  } else {
    [self.bgScrollView setContentOffset:CGPointMake(0, (pageIntY+1)*ROW_H) animated:YES];
  }
}

VC调用代码:


XtayNoticeScrollView *notiView = [[XtayNoticeScrollView alloc] initWithFrame:CGRectMake(50, 100, self.view.frame.size.width-100, 50) titleArray:@[@"我是第一个数据-11111111111111", @"我是第二个数据-2222222", @"我是第三个数据-33333333"]];
  
[self.view addSubview:notiView];

运行后的效果视频:

公告内容用的label,无点击效果,若需要。替换为button,添加手势,都可以。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: iOS实现循环滚动公告栏

本文链接: https://www.lsjlt.com/news/30489.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iOS实现循环滚动公告栏
    本文实例为大家分享了iOS实现循环滚动公告栏的具体代码,供大家参考,具体内容如下 封装了一个继承于UIView的类,如下: #import <UIKit/UIKit.h&g...
    99+
    2022-05-31
    iOS 滚动 公告栏
  • iOS如何实现循环滚动公告栏
    这篇文章将为大家详细讲解有关iOS如何实现循环滚动公告栏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。iOS实现循环滚动公告栏的具体代码如下:#import <UIKit/UIKit.h&...
    99+
    2023-06-14
  • 简单实现Android滚动公告栏
    实现的效果,是一个滚动的公告栏,是这样的: 可以看到这个公告栏一方面是滚动,另外一方面是可点击。 实现的思路: 1.textView放在ViewFlipper中实现滑动效果(...
    99+
    2022-06-06
    公告栏 Android
  • vue实现公告消息横向无缝循环滚动
    本文实例为大家分享了vue实现公告消息横向无缝循环滚动的具体代码,供大家参考,具体内容如下 该组件实现了公告消息的无缝横向滚动。我命名为marqueex.vue文件,感谢原来博主的分...
    99+
    2022-11-13
  • vue怎么实现公告消息横向无缝循环滚动
    这篇文章主要讲解了“vue怎么实现公告消息横向无缝循环滚动”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么实现公告消息横向无缝循环滚动”吧!marqueex.vue<templ...
    99+
    2023-06-29
  • js实现公告自动滚动
    本文实例为大家分享了js实现公告自动滚动的具体代码,供大家参考,具体内容如下 html <div class="test003">           <div ...
    99+
    2022-11-13
  • 微信小程序左右滚动公告栏效果怎么实现
    要实现微信小程序的左右滚动公告栏效果,可以使用swiper组件和设置动画效果。1. 在小程序的wxml文件中,使用swiper组件来...
    99+
    2023-08-16
    微信小程序
  • vue实现横屏滚动公告效果
    本文实例为大家分享了vue实现横屏滚动公告效果的具体代码,供大家参考,具体内容如下 HTML文件 <template>   <div id="box" ref="...
    99+
    2022-11-13
  • vue实现竖屏滚动公告效果
    本文实例为大家分享了vue实现竖屏滚动公告效果的具体代码,供大家参考,具体内容如下 html文件 <template> <div class="scroll-wr...
    99+
    2022-11-13
  • 微信小程序中如何实现左右滚动公告栏效果
    这篇文章主要介绍微信小程序中如何实现左右滚动公告栏效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!代码如下<view class='notice-wrap&...
    99+
    2022-10-19
  • vue实现循环滚动图片
    本文实例为大家分享了vue实现循环滚动图片的具体代码,供大家参考,具体内容如下  效果(循环滚动,可切换方向): 轮播组件BaseSwiper.vue: <temp...
    99+
    2022-09-27
  • js实现列表循环滚动
    本文实例为大家分享了js实现列表循环滚动的具体代码,供大家参考,具体内容如下 先介绍几个属性 clientHeight 元素的高度clientTop 元素顶部边框的宽度scrollT...
    99+
    2022-11-13
  • 微信小程序左右滚动公告栏效果代码实例
    以下是一个微信小程序左右滚动公告栏的代码实例:1. 在微信小程序的wxml文件中,创建一个scroll-view组件用于显示公告:`...
    99+
    2023-08-16
    微信小程序
  • KotlinFrameLayout与ViewPager2控件实现滚动广告栏方法
    目录新模块bannerFrameLayout帧布局ViewPager2控件小结在上一节中我们简单的介绍了RecyclerView 的使用,他是整个开发的重点控件,这一节我们来看看Fr...
    99+
    2022-12-08
    Kotlin滚动广告栏 Kotlin FrameLayout和ViewPager2
  • Unity3d实现无限循环滚动背景
    在游戏项目中我们常常看到商城的广告牌,几张广告图片循环滚动,类似跑马灯,现在我将讨论一种实现方法,并提供一个管理类,大家可以直接使用。 实现原理:背景图片循环滚动的原理很简单:两张图...
    99+
    2022-11-12
  • jQuery实现一组图片循环滚动
    本文实例为大家分享了jQuery实现一组图片循环滚动的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html lang="...
    99+
    2022-11-13
  • js如何实现列表循环滚动
    本篇内容主要讲解“js如何实现列表循环滚动”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“js如何实现列表循环滚动”吧!先介绍几个属性clientHeight 元素的高度clientTop 元素顶...
    99+
    2023-07-02
  • vue实现列表无缝循环滚动
    本文实例为大家分享了vue实现列表无缝循环滚动的具体代码,供大家参考,具体内容如下 功能介绍: 在PC端网页,包括大数据、官网、后台管理平台开发中,可能会用到这种列表循环滚动的展示。...
    99+
    2022-09-27
  • react实现无限循环滚动信息
    本文实例为大家分享了react实现无限循环滚动信息的具体代码,供大家参考,具体内容如下 需求 后端传递过来的数据滚动显示,鼠标移入后停止滚动,鼠标移出后继续滚动,参考公司门户的公告信...
    99+
    2022-11-12
  • vue通过定时器实现垂直滚动公告
    前言 最近项目有个需求是做一个垂直滚动的公告,其中也涉及到了设置定时器和清除定时器方面的知识点,在这里记录下过程,不对的地方欢迎大家指正,一起共同进步! 思路 1. 写好样式,把滚动...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作