当前位置: 首页 > 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的内存 视频讲解如下 【…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...