当前位置: 首页 > news >正文

React Native 实现滑一点点内容区块指示器也滑一点点

效果图如上,内容滑一点点,指示器也按比例话一点点,列表宽度跟数据有关。

实现思路如下:

1.监听列表滑动事件,获取列表横向滑动距离,假设为A;

2.获取列表的宽度,及列表可滑动的宽度,假设为B;

3.获取指示器宽度,及指示器可滑动的宽度;假设为C;

4.计算指示器滑动距离,假设为X;

5.根据 滑动距离/列表可滑宽度 = 滑动距离/指示器可滑宽度,得出A/B=X/C,

所以X= A/B * C,把ABC数据带进来,即可算出指示器滑动距离,并设置给指示器item的左间距。

代码实现如下:UI样式如下

<View> <FlatListhorizontal={true}showsHorizontalScrollIndicator={false}data={tripData}renderItem={({item, index, separators}) => this.renderItem(item, index, length)}keyExtractor={(item, index) => index.toString()}renderScrollComponent={props => (<ScrollView {...props} />)}getItemLayout={(data, index) => ({length: this.vItemWidth, offset: (this.vItemWidth + 5) * index, index})}onTouchStart={(e) => this.scrollEnable(false)}onTouchCancel={(e) => this.scrollEnable(true)}onScroll={this.onScroll}/>{this.renderIndicator()}</View>renderIndicator() {return(<View style={styles.indicatorContainer}><Viewref={(view) => {this.indicatorView = view;}}style={[styles.indicatorItem]}/></View>);};scrollEnable(enable) {//处理一些滑动冲突事件}renderItem(item, index, length) {
//item的样式
}

滑动算法如下:

onScroll = (event) => { let nativeEvent = {...event.nativeEvent};let offsetX = nativeEvent.contentOffset.x;//用户横向滑动距离let indicatorWidth = styles.indicatorContainer.width;//指示器容器宽度let indicatorItemWidth = styles.indicatorItem.width;  //指示器宽度let indicatorLeft = offsetX / this.slideWidth * (indicatorWidth - indicatorItemWidth); this.indicatorView.setNativeProps({marginLeft: indicatorLeft}); };//列表可滑距离=列表总宽度 - 单屏宽度
列表总宽度= item的宽度 * item的个数 + item间间距 * (item个数 - 1) + 左间距 + 有间距;
列表可滑距离 = 列表总宽度 - 单屏显示的宽度;

相关文章:

React Native 实现滑一点点内容区块指示器也滑一点点

效果图如上&#xff0c;内容滑一点点&#xff0c;指示器也按比例话一点点&#xff0c;列表宽度跟数据有关。 实现思路如下&#xff1a; 1.监听列表滑动事件&#xff0c;获取列表横向滑动距离&#xff0c;假设为A&#xff1b; 2.获取列表的宽度&#xff0c;及列表可滑动的宽度…...

怎么写C#命令行参数程序,及控制台带参数案例(程序完整源码)下载

C#命令行参数解析控制台带参数编写案例&#xff08;程序完整源码&#xff09;下载链接 https://download.csdn.net/download/luckyext/90434790 在CMD命令窗口&#xff0c;输入ping 、ipconfig等这样的命令&#xff0c;大家应该都知道&#xff0c;但很多同学可能不知道怎么写…...

全国青少年航天创新大赛各项目对比分析

全国青少年航天创新大赛各项目对比分析 一、比赛场地对比 项目名称场地尺寸场地特点组别差异筑梦天宫虚拟三维场景动态布局&#xff0c;小学组3停泊处&#xff0c;初高中组6停泊处&#xff1b;涉及传送带、机械臂、传感器等虚拟设备。初中/高中组任务复杂度更高&#xff0c;运…...

基于RAG的法律条文智能助手

文章目录 前言一、 项目背景与需求设计二、 数据收集与整理三、 核心实现流程1. 配置与模型初始化1. 配置区2. 模型初始化&#xff08;init_models 函数&#xff09;3. 数据加载与验证&#xff08;load_and_validate_json_files 函数&#xff09;4. 节点生成&#xff08;create…...

智能对讲机:5G+AI赋能下的石油工业新“声”态

在浩瀚的能源版图上&#xff0c;中国正以非凡的“深度”探索着石油资源的奥秘。随着5G技术的不断成熟与普及&#xff0c;曾经“满山遍野找信号”的石油工人&#xff0c;如今已步入了一个全新的通信时代。在这个时代里&#xff0c;智能对讲机成为了连接指挥中心与一线工人的桥梁…...

leetcode日记(77)子集Ⅱ

不知道为什么看到这道题就很头痛…… 其实只要掌握nums不包含重复元素的情况下的代码就行了。 若nums不能包含重复元素&#xff0c;那么使用回溯很容易就能写出来&#xff1a; class Solution {void hs(vector<int> v,int x,vector<int> r,vector<vector<…...

Linux tar命令

压缩解压缩 1. tar 命令 语法&#xff1a; tar [主选项 辅选项] 文件或目录 参数功能-c创建新的归档文件&#xff08;打包&#xff09;-x从归档文件中提取文件&#xff08;解包&#xff09;-f <文件名>指定归档文件名-v显示操作的详细信息-z通过gzip压缩归档文件-j通…...

【nodeJS】服务端连接mysql、定义一个接口,并在前端调用

服务端连接数据库&#xff0c;并简单使用 服务器连接mysql后端定义接口前端调用接口封装axios&#xff08;简易版&#xff09;解决前端请求接口返回了一个html 定义api请求vue中调用接口 服务器连接mysql 安装mysql2&#xff1a;npm install mysql2启动服务&#xff1a;npm sta…...

驱动开发系列40 - Linux 显卡KMD驱动代码分析(一) - 设备初始化过程

目录 一:概述 二:显卡内核态驱动的主要功能 1. 设备初始化 2. 内存管理 3. 中断处理 4. 显示管理 5. 电源管理 三:Linux显卡内核态驱动的架构 四:PCI设备初始化过程 五:显卡设备初始化 一:概述 显卡内核态驱动(KMD)负责与GPU硬件直接交互,提供底层接口、管理显存…...

玩转大语言模型——Ubuntu系统环境下使用llama.cpp进行CPU与GPU混合推理deepseek

系列文章目录 玩转大语言模型——使用langchain和Ollama本地部署大语言模型 玩转大语言模型——三分钟教你用langchain提示词工程获得猫娘女友 玩转大语言模型——ollama导入huggingface下载的模型 玩转大语言模型——langchain调用ollama视觉多模态语言模型 玩转大语言模型—…...

20250301在chrome中安装CRX猫抓

20250301在chrome中安装CRX猫抓 2025/3/1 18:08 百度&#xff1a;猫抓 CRX https://www.crx4chrome.com/crx/49597/ 猫抓 (cat-catch) Crx File 2.5.9 for Chrome (Latest Version) Get Latest Version of 猫抓 (cat-catch) from Web Store Developer Tools > cat-catch / E…...

Docker 深度解析:适合零基础用户的详解

此博客涵盖 Docker 的基本概念和作用、架构和核心组件、与传统虚拟机的对比、安装与基本操作&#xff0c;以及在实际开发和运维中的应用场景。 首先&#xff0c;详细解释了 Docker 的基本概念&#xff0c;包括它的诞生背景、作用及其如何解决传统应用部署中的问题。然后&#…...

LeetCode 分割回文串(回溯、dp)

131.分割回文串 给你一个字符串 s&#xff0c;请你将 s 分割成一些 子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 示例 1&#xff1a; 输入&#xff1a;s "aab" 输出&#xff1a;[["a","a","b"],["a…...

期权帮|股指期货入门知识:什么是股指期货基差?什么是股指期货价差?

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 股指期货入门知识&#xff1a;什么是股指期货基差&#xff1f;什么是股指期货价差&#xff1f; 股指期货的基差与价差是两个重要的价格关系指标&#xff0c;它们反映了现货市场…...

解锁GPM 2.0「卡顿帧堆栈」|代码示例与实战分析

每个游戏开发者都有一个共同的愿望&#xff0c;那就是能够在无需复现玩家反馈的卡顿现象时&#xff0c;快速且准确地定位卡顿的根本原因。为了实现这一目标&#xff0c;UWA GPM 2.0推出了全新功能 - 卡顿帧堆栈&#xff0c;旨在为开发团队提供高效、精准的卡顿分析工具。在这篇…...

Python:类型转换和深浅拷贝,可变与不可变对象

int()&#xff1a;转换为一个整数&#xff0c;只能转换由纯数字组成的字符串 浮点型强转整型会去掉小数点及后面的数&#xff0c;只保留整数部分 #如果字符串中有数字和正负号以外的字符就会报错 float()&#xff1a;整形转换为浮点型会自动添加一位小数 .0 如果字符串中有…...

Redis——缓存穿透、击穿、雪崩

缓存穿透 什么是缓存穿透 缓存穿透说简单点就是大量请求的 key 根本不存在于缓存中&#xff0c;导致请求直接到了数据库上&#xff0c;根本没有经过缓存这一层。举个例子&#xff1a;某个黑客故意制造我们缓存中不存在的 key 发起大量请求&#xff0c;导致大量请求落到数据库…...

8.1.STM32_OLED

4.STM32_OLED 跟着江协科大的视频&#xff0c;无法点亮OLED屏幕解决办法 每个人使用的0.96寸OLED屏幕信号不一样&#xff0c;存在很多兼容性问题 归根结底就是驱动的问题&#xff01; 本人的OLED是SSD1306,在淘宝店铺找了驱动文件后成功点亮&#xff0c;示例见文末 请针对自…...

Gartner发布安全运营指标构建指南

如何为安全运营指标构建坚实的基础 安全运营经理需要报告威胁检测、调查和响应计划的有效性&#xff0c;但难以驾驭大量潜在的 SOC 指标。本研究提供了设计针对 SOC 的指标系统的示例和实践。 主要发现 需要清晰、一致的衡量标准来向董事会成员或服务提供商等更广泛的团队传达…...

【赵渝强老师】监控Redis

对运行状态的Redis实例进行监控是运维管理中非常重要的内容&#xff0c;包括&#xff1a;监控Redis的内存、监控Redis的吞吐量、监控Redis的运行时信息和监控Redis的延时。通过Redis提供的监控命令便能非常方便地实现对各项指标的监控。 一、监控Redis的内存 视频讲解如下 【…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...