react native 使用ScrollView实现轮播图效果

news/2025/1/19 13:54:33/

废话不多说,直接上代码(由于功能比较简单就没必要简述了)

// 轮播图的业务逻辑
startAutoPlay (data) {// data: 图片的数据列表if (this.scrollViewRef) {this.interval = setInterval(() => {const { currentIndex, itemWidth } = this.state;const nextIndex = (currentIndex + 1) % data.length;this.setState({ currentIndex: nextIndex });let isAnimated = true// 最后一张切换到第一张不要做动画if(nextIndex == 0){isAnimated = false}this.scrollViewRef.scrollTo({ x: nextIndex * itemWidth, animated: isAnimated });}, 2000);}}// 组件销毁清除定时器stopAutoPlay () {clearInterval(this.interval);}
               // 轮播图的View<View style={styles.mainWarp}>{this.state.list.length > 0 && (<ScrollViewref={ref => {this.scrollViewRef = ref}}horizontalpagingEnabledshowsHorizontalScrollIndicator={false}>{this.state.list.map((item, index) => (<Imagekey={index}source={{ uri: item.path }}style={styles.itemImage}/>))}</ScrollView>)}</View>

http://www.ppmy.cn/news/1074138.html

相关文章

基于MyBatis注解的学生管理程序--mybatis注解开发的练手项目

基于MyBatis注解的学生管理程序 需求&#xff1a;完成基于MyBatis注解的学生管理程序&#xff0c;能够用MyBatis注解实现查询操作、实现修改操作、实现一对多查询 &#xff08;1&#xff09;MyBatis注解开发实现查询操作。根据表1和表2在数据库分别创建一个学生表tb_student和…

数据结构——C语言实现单向循环链表

//循环单链表 #include <stdio.h> #include <stdlib.h> #include <math.h>#define OK 1 #define ERROR 0 #define TRUE 1 #define FALSE 0typedef int Status; typedef int ElemType; typedef struct Node{ElemType data;struct Node *next; }Node;//定义Lin…

服务器日志出现大量NTLM(NT LAN Manager)攻击

日志名称:Security 来源: Microsoft-Windows-Security-Auditing 日期: 2023/8/30 20:57:40 事件 ID:4625 任务类别:登录 级别: 信息 关键字: 审核失败 用户: 暂缺 计算机: WIN-QBJ3ORTR0CF 描述: 帐户登录失败。 主题: 安全 ID:NULL SID 帐户名:- 帐户域:- …

Http 1.0 1.1 2.0 3.0 版本差别

Http 1.0 发布年份&#xff1a;1996 非官方标准 短链接&#xff1a;每一次请求都对应一次TCP的连接与释放 开销大&#xff1a;每次请求都要TCP的连接与释放队头阻塞&#xff1a;每次请求都必须等上一次请求获得响应之后&#xff0c;才可以发送&#xff1b;效率低下 缓存&…

Spring——Spring读取文件

文章目录 1.通过 value 读取比较简单的配置信息2.通过ConfigurationProperties读取并与 bean 绑定3.通过ConfigurationProperties读取并校验4. PropertySource 读取指定 properties 文件5.题外话:Spring加载配置文件的优先级 很多时候我们需要将一些常用的配置信息比如阿里云os…

Docker 及 Docker Compose 安装指南

Docker 是一个开源的容器化平台&#xff0c;可以帮助我们快速构建、打包和运行应用程序。而 Docker Compose 则是用于管理多个容器应用的工具&#xff0c;可以轻松定义和管理多个容器之间的关系。现在&#xff0c;让我们开始安装过程吧&#xff01; docker 安装 apt安装 sudo…

数字孪生体技术--学习笔记

一.数字孪生体技术概述 数字孪生体技术是跨层级&#xff0c;跨尺度的现实世界和虚拟世界的建立沟通的桥梁&#xff0c;是第四次工业革命的通用目的技术和核心技术体系之一&#xff0c;是支撑万物互联的综合技术系统&#xff0c;是数字经济发展的基础&#xff0c;是未来智能时代…

弯道超车必做好题集锦三(C语言选择题)

前言&#xff1a; 编程想要学的好&#xff0c;刷题少不了&#xff0c;我们不仅要多刷题&#xff0c;还要刷好题&#xff01;为此我开启了一个弯道超车必做好题锦集的系列&#xff0c;每篇大约10题左右。此为第三篇选择题篇&#xff0c;该系列会不定期更新&#xff0c;后续还会…