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 实现滑一点点内容区块指示器也滑一点点
效果图如上,内容滑一点点,指示器也按比例话一点点,列表宽度跟数据有关。 实现思路如下: 1.监听列表滑动事件,获取列表横向滑动距离,假设为A; 2.获取列表的宽度,及列表可滑动的宽度…...
怎么写C#命令行参数程序,及控制台带参数案例(程序完整源码)下载
C#命令行参数解析控制台带参数编写案例(程序完整源码)下载链接 https://download.csdn.net/download/luckyext/90434790 在CMD命令窗口,输入ping 、ipconfig等这样的命令,大家应该都知道,但很多同学可能不知道怎么写…...
全国青少年航天创新大赛各项目对比分析
全国青少年航天创新大赛各项目对比分析 一、比赛场地对比 项目名称场地尺寸场地特点组别差异筑梦天宫虚拟三维场景动态布局,小学组3停泊处,初高中组6停泊处;涉及传送带、机械臂、传感器等虚拟设备。初中/高中组任务复杂度更高,运…...
基于RAG的法律条文智能助手
文章目录 前言一、 项目背景与需求设计二、 数据收集与整理三、 核心实现流程1. 配置与模型初始化1. 配置区2. 模型初始化(init_models 函数)3. 数据加载与验证(load_and_validate_json_files 函数)4. 节点生成(create…...
智能对讲机:5G+AI赋能下的石油工业新“声”态
在浩瀚的能源版图上,中国正以非凡的“深度”探索着石油资源的奥秘。随着5G技术的不断成熟与普及,曾经“满山遍野找信号”的石油工人,如今已步入了一个全新的通信时代。在这个时代里,智能对讲机成为了连接指挥中心与一线工人的桥梁…...
leetcode日记(77)子集Ⅱ
不知道为什么看到这道题就很头痛…… 其实只要掌握nums不包含重复元素的情况下的代码就行了。 若nums不能包含重复元素,那么使用回溯很容易就能写出来: class Solution {void hs(vector<int> v,int x,vector<int> r,vector<vector<…...
Linux tar命令
压缩解压缩 1. tar 命令 语法: tar [主选项 辅选项] 文件或目录 参数功能-c创建新的归档文件(打包)-x从归档文件中提取文件(解包)-f <文件名>指定归档文件名-v显示操作的详细信息-z通过gzip压缩归档文件-j通…...
【nodeJS】服务端连接mysql、定义一个接口,并在前端调用
服务端连接数据库,并简单使用 服务器连接mysql后端定义接口前端调用接口封装axios(简易版)解决前端请求接口返回了一个html 定义api请求vue中调用接口 服务器连接mysql 安装mysql2:npm install mysql2启动服务: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 百度:猫抓 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 的基本概念和作用、架构和核心组件、与传统虚拟机的对比、安装与基本操作,以及在实际开发和运维中的应用场景。 首先,详细解释了 Docker 的基本概念,包括它的诞生背景、作用及其如何解决传统应用部署中的问题。然后&#…...
LeetCode 分割回文串(回溯、dp)
131.分割回文串 给你一个字符串 s,请你将 s 分割成一些 子串,使每个子串都是 回文串 。返回 s 所有可能的分割方案。 示例 1: 输入:s "aab" 输出:[["a","a","b"],["a…...
期权帮|股指期货入门知识:什么是股指期货基差?什么是股指期货价差?
锦鲤三三每日分享期权知识,帮助期权新手及时有效地掌握即市趋势与新资讯! 股指期货入门知识:什么是股指期货基差?什么是股指期货价差? 股指期货的基差与价差是两个重要的价格关系指标,它们反映了现货市场…...
解锁GPM 2.0「卡顿帧堆栈」|代码示例与实战分析
每个游戏开发者都有一个共同的愿望,那就是能够在无需复现玩家反馈的卡顿现象时,快速且准确地定位卡顿的根本原因。为了实现这一目标,UWA GPM 2.0推出了全新功能 - 卡顿帧堆栈,旨在为开发团队提供高效、精准的卡顿分析工具。在这篇…...
Python:类型转换和深浅拷贝,可变与不可变对象
int():转换为一个整数,只能转换由纯数字组成的字符串 浮点型强转整型会去掉小数点及后面的数,只保留整数部分 #如果字符串中有数字和正负号以外的字符就会报错 float():整形转换为浮点型会自动添加一位小数 .0 如果字符串中有…...
Redis——缓存穿透、击穿、雪崩
缓存穿透 什么是缓存穿透 缓存穿透说简单点就是大量请求的 key 根本不存在于缓存中,导致请求直接到了数据库上,根本没有经过缓存这一层。举个例子:某个黑客故意制造我们缓存中不存在的 key 发起大量请求,导致大量请求落到数据库…...
8.1.STM32_OLED
4.STM32_OLED 跟着江协科大的视频,无法点亮OLED屏幕解决办法 每个人使用的0.96寸OLED屏幕信号不一样,存在很多兼容性问题 归根结底就是驱动的问题! 本人的OLED是SSD1306,在淘宝店铺找了驱动文件后成功点亮,示例见文末 请针对自…...
Gartner发布安全运营指标构建指南
如何为安全运营指标构建坚实的基础 安全运营经理需要报告威胁检测、调查和响应计划的有效性,但难以驾驭大量潜在的 SOC 指标。本研究提供了设计针对 SOC 的指标系统的示例和实践。 主要发现 需要清晰、一致的衡量标准来向董事会成员或服务提供商等更广泛的团队传达…...
【赵渝强老师】监控Redis
对运行状态的Redis实例进行监控是运维管理中非常重要的内容,包括:监控Redis的内存、监控Redis的吞吐量、监控Redis的运行时信息和监控Redis的延时。通过Redis提供的监控命令便能非常方便地实现对各项指标的监控。 一、监控Redis的内存 视频讲解如下 【…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...
快刀集(1): 一刀斩断视频片头广告
一刀流:用一个简单脚本,秒杀视频片头广告,还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农,平时写代码之余看看电影、补补片,是再正常不过的事。 电影嘛,要沉浸,…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
Docker拉取MySQL后数据库连接失败的解决方案
在使用Docker部署MySQL时,拉取并启动容器后,有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致,包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因,并提供解决方案。 一、确认MySQL容器的运行状态 …...
Monorepo架构: Nx Cloud 扩展能力与缓存加速
借助 Nx Cloud 实现项目协同与加速构建 1 ) 缓存工作原理分析 在了解了本地缓存和远程缓存之后,我们来探究缓存是如何工作的。以计算文件的哈希串为例,若后续运行任务时文件哈希串未变,系统会直接使用对应的输出和制品文件。 2 …...
基于江科大stm32屏幕驱动,实现OLED多级菜单(动画效果),结构体链表实现(独创源码)
引言 在嵌入式系统中,用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例,介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单,执行相应操作,并提供平滑的滚动动画效果。 本文设计了一个…...
