如何反应原生水平列表选择中心元素id并在屏幕上显示
原生水平列表选择中心元素id并在屏幕上显示的方法可以通过以下步骤实现：
- 获取水平列表的所有元素。
- 计算水平列表的中心位置。
- 遍历所有元素，计算每个元素相对于中心位置的距离。
- 找到距离最近的元素，获取其id。
- 在屏幕上显示该元素的id。
具体实现步骤如下：
- 获取水平列表的所有元素：
- 使用HTML和CSS创建一个水平列表，并为每个元素设置唯一的id。
- 使用JavaScript的DOM操作方法，如getElementById或querySelectorAll，获取所有水平列表的元素。
- 计算水平列表的中心位置：
- 使用JavaScript的offsetWidth属性获取水平列表的宽度。
- 将宽度除以2，得到中心位置。
- 遍历所有元素，计算每个元素相对于中心位置的距离：
- 使用JavaScript的offsetLeft属性获取每个元素相对于父容器的左偏移量。
- 将左偏移量加上元素宽度的一半，得到元素的中心位置。
- 计算元素中心位置与水平列表中心位置的距离。
- 找到距离最近的元素，获取其id：
- 使用JavaScript的Math.abs方法计算每个元素与中心位置的距离的绝对值。
- 通过比较距离的大小，找到距离最近的元素。
- 获取该元素的id属性值。
- 在屏幕上显示该元素的id：
- 使用JavaScript的innerHTML或textContent属性，将元素的id显示在屏幕上。
示例代码如下（假设水平列表的父容器id为"horizontal-list"）：
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal-list {
display: flex;
justify-content: center;
}
.list-item {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="horizontal-list">
<div class="list-item" id="item1">Item 1</div>
<div class="list-item" id="item2">Item 2</div>
<div class="list-item" id="item3">Item 3</div>
<div class="list-item" id="item4">Item 4</div>
<div class="list-item" id="item5">Item 5</div>
</div>
<script>
// 获取水平列表的所有元素
const itemList = document.querySelectorAll('.list-item');
// 计算水平列表的中心位置
const listWidth = document.getElementById('horizontal-list').offsetWidth;
const centerPosition = listWidth / 2;
// 初始化最小距离和中心元素id
let minDistance = Infinity;
let centerElementId = '';
// 遍历所有元素，计算每个元素相对于中心位置的距离
itemList.forEach(item => {
const itemWidth = item.offsetWidth;
const itemLeftOffset = item.offsetLeft;
const itemCenterPosition = itemLeftOffset + itemWidth / 2;
const distance = Math.abs(itemCenterPosition - centerPosition);
// 找到距离最近的元素，更新最小距离和中心元素id
if (distance < minDistance) {
minDistance = distance;
centerElementId = item.id;
}
});
// 在屏幕上显示中心元素id
const centerElement = document.getElementById(centerElementId);
centerElement.innerHTML = `中心元素：${centerElementId}`;
</script>
</body>
</html>以上代码会根据水平列表的布局，计算出中心元素的id，并将其显示在屏幕上。请注意，这只是一个简单的示例，实际应用中可能需要根据具体情况进行适当的修改和优化。
相关·内容
1回答
有一个平面列表/列表视图，我把它设为水平的，现在我想获取中间显示的项目的id，就像在聊天中我们选择镜头选择一样，有什么方法可以实现吗？
浏览 12提问于2018-08-01得票数 0
试图将水平菜单定位到图像上。<div id="banner"></div>
<div id="menu-outer"
浏览 1提问于2015-02-14得票数 1
回答已采纳
2回答
我正在开发一个反应本地应用程序使用世博和我使用样式的组件。我使用的是弹性包装，所以现在，我有6种语言，3行，每行2个标志。我正在设法弄清楚如何使用柔性盒，以便旗子在两个方向上均匀地间隔。我如何做到同样的列--考虑到旗子的数量是动态的？我希望语言的屏幕在旗帜周围有均匀的间距，无论是垂直的还是水平</e
浏览 2提问于2022-09-03得票数 0
我在SurfaceListbox上工作，但我认为这个逻辑也适用于普通的WPF列表框。
我有一个启用了水平滚动的表面列表框。它包含近20个项目。表面列表框将被放置在屏幕的中央。现在，当用户滚动列表框时，项目会水平移动，并且基于列表框中每个项目的大小，我已经看到通常在任何给定时间屏幕上都有3个项目可见。现在我想要做的是，当用户停止滚动并且3个项目可见时，我想放大中心项目，即基本上放大它
浏览 0提问于2011-03-09得票数 0
回答已采纳
3回答
但是当窗口显示在页面底部时，当我们点击小图像时，它就出现在屏幕顶部，我不喜欢它。我希望它每次都出现在屏幕中央，请在这个页面中看到它：HTML代码：
<!
浏览 2提问于2013-12-12得票数 0
我最近开始使用react-native，并且偶然发现了FlatList组件。在使用react时，我总是使用带数组的map。下面是使用这两种方法的两个示例：{ return ( )}
FlatL
浏览 2提问于2018-01-05得票数 19
回答已采纳
我使用的是redux，反应，反应-路由器和重新选择。有一个屏幕包含两个组件，Header和Body。在Header中有一个组件来选择一个ID。当选择一个新的ID时，一个新的动作被分派来更新在redux状态下的ID。
基于该ID，应该有一个异步API调用从服务器加载元素并将其存储在状态中，然后触发屏幕的呈现并在Body中显示元素。
浏览 2提问于2016-11-01得票数 1
回答已采纳
2回答
我有一个HTML选择标签 <option values="1">One</option> <option values="3">Three</option>我希望将不同的选项显示为481 as以上
浏览 5提问于2015-11-13得票数 1
回答已采纳
我有一个闪屏/启动屏幕。它包含一个标题(标签)，一个图片300x300和一个小标签，上面写着文案信息。我正试图将3个控件垂直地居中，这样它们就能填充屏幕。(至少看起来不错)我找不出或找到如何对3进行中心化的说明。我可以创建垂直约束、宽度约束和相对于其他控件的约束。但他们从不以iPhone5、iPhone6、6+等为中心.如何使用IDE垂直和水平地将3控件中心化，以便它们在所有设备/布局上正确显示？
浏览 0提问于2016-07-01得票数 0
回答已采纳
我试图将div元素定位在图片库的顶部，并将其垂直和水平地放置在Galleria内部，而不管屏幕大小。gallery/1.jpg" %> <%= image_tag "gallery/3.jpg" %> margin : auto; z-
浏览 6提问于2014-02-20得票数 2
回答已采纳
2回答
复杂数学水平视差松弛函数
、、、、
~维基百科
这种效果应该可以在所有视图中进行扩展。这意味着元素移动过的元素的高度和宽度应该无关紧要。
当用户滚动屏幕高度的一半时，“移动元素”应该位于精确的中心位置。因为用户已经滚动了屏幕的一半，所以元素已经垂直滚动了。我们现在只担心水平。如你所见，这是精确的<e
浏览 6提问于2017-03-28得票数 0
回答已采纳
3回答
我只想移动3个链接(形状成块)到中心。这应该很容易但我就是想不出该怎么做。中间和水平中心一样。这可能是一个愚蠢的错误或概念问题。我不想把文字移到盒子的中央，只想移动盒子。
浏览 2提问于2016-07-26得票数 0
回答已采纳
我有一个小问题，将焦点设置为水平caph列表中的元素，如果元素在列表的前面，则将视图移到该元素。我正在做的是获取元素的位置索引，该元素将传递给caph列表的元素数组。在创建caph列表时，我使用initialItemIndex参数来确保无论元素在列表中的位置如何，它都将显示在屏幕上。我使用它是
浏览 0提问于2017-02-10得票数 1
1回答
我如何使一个垂直的平列表项目，在反应本机，以适应位置上滚动和填补当前窗口？我希望每个项目填充屏幕，而不是为前面或即将出现的项目显示。但我的问题是，当应用于Flatlist时，前面项目的部分显示在后续视图的顶部。这会随着你的向下滚动而增大。我想要的效果是，如果您正在滚动通过TikTok。您可以看到每个视频是如何填充屏幕的，当您向上或向下滚动时，会产生一种弹性效果，即如果滚动不完整，当前视频就会反弹回位置。data={DATA}
浏览 9提问于2022-03-28得票数 0
1回答
我对原生反应还很陌生。我有关于FlexBox的想法，据我所知，我们可以显示元素的左/右/中心对齐。Value2Image Text value1 Value2
______________________________ 如何在平面列表中显示上面的布局而不使用另一个
浏览 14提问于2019-02-18得票数 0
在经历了许多错误和修复之后，许多与重新运行的所有东西的正确/最最新版本有关的错误似乎基本上都起作用了，只不过每次我使用抽屉函数切换屏幕时，都会出现“找不到变量：_updatePropsPaper”的错误同样，这个问题似乎只有当我用抽屉函数切换屏幕时才会出现，而且它实际上仍然改变了屏幕，它只是显示和错误。“依赖关系”：{“@react本机-屏蔽-查看/蒙面-视图”："0.2.6“、”@react-本机-选择器/拾取器“："
浏览 4提问于2022-06-14得票数 1
我有一个react原生应用程序(4个屏幕)，它使用Azure函数(返回一个json对象数组)获取数据。第一个屏幕根据遥测数据(即温度和湿度、警报数量等)呈现数据中心的整体状态。第二个屏幕是所有数据中心的列表，您可以在其中深入查看该位置的温度和湿度。这就是我的问题所在。我使用获取的数据设置了我的原生react应用程序的状态，并在第一个屏幕上正确解析了所有内容。我认为问题出在反应导航版
浏览 17提问于2019-04-09得票数 0
5回答
我的网页上有几个<input type="number">元素。我使用的是jQTouch，而且我尽量保持全屏；也就是说，水平滚动是不好的。每当我单击<input>元素时，页面都会向右滚动，在屏幕右侧显示一个黑色边框，并取消所有内容的中心。输入从屏幕的左侧偏移，并从页面中间的某个位置开始。
如何防止在焦点上出现这种滚动？
浏览 0提问于2010-06-02得票数 24
这是为了反应原生，我想从api中获取第二页的第一页的结尾是在屏幕上，并显示在回收器列表视图()上类似无限滚动。我如何才能做到这一点，我试着在onEndReached属性中设置一个回调，但是这个回调在初始页面加载后立即触发。(初始页面为2个屏幕高度)。
浏览 14提问于2018-01-08得票数 1
2回答
我有一个锚元素列表(它是页面底部的一个页面导航器)。在移动端，列表被换成两行。为了便于移动使用，我希望将其保持在一行，并且只显示适合屏幕大小的页码。我不想做whitespace: nowrap;或overflow-x: scroll --我想让尽可能多的元素显示在一行上，而不是滚动或消失在水平的以太中。我想我应该用jQuery来决定窗口的宽度，如果列表的整体宽度超过了屏幕的宽度，那么只显示<
浏览 19提问于2017-01-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
