HarmonyOS 鸿蒙Next 轻量级js ui，如何获取到list滚动到的item的index

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 轻量级js ui，如何获取到list滚动到的item的index 轻量级js ui，list滚动后，不知道怎么获取当前item的index，跳转到其它页面再回来时，没法恢复原样。

例如，list滚动停止后，页面上显示三个item，点击第三个item进入新的页面，再回来时不知道怎么恢复成页面仍然显示三个item的情况。

13 回复

点击item的时候，可以通过{{$idx}}获取index，可参考如下代码：

<!-- index.hml -->
<div class="container">
  <list class="todo-wrapper">
    <list-item for="{{todolist}}" class="todo-item">
      <div style="flex-direction: column;align-items: center;justify-content: center;">
        {{$idx}}.
        <text class="todo-title">元素index:{{$idx}}</text>
        <text class="todo-title">{{$item.title}}</text>
        <text class="todo-title">{{$item.date}}</text>
      </div>
    </list-item>
  </list>
</div>

更多关于HarmonyOS 鸿蒙Next 轻量级js ui，如何获取到list滚动到的item的index的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好的，谢谢，谢谢，文档找半天找不到😨，

找HarmonyOS工作还需要会Flutter技术的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

点击列表项怎么把 index 传递到 js，轻量级穿戴设备支持 dataset 吗

页面跳转可以传参的 ，

list组件滚动时无法获取到对应的item索引,但是点击item可以获取到index,将这个index保存到全局变量中，返回时使用scrollTo再跳转到对应的item swiper组件在滑动时使用change事件可以获取到当前的item

请问点击item时如何获取index？官方文档没有写，

项目名称

  • 项目状态：进行中
  • 项目类型：开源
  • 项目描述：这是一个多功能的工具集合，旨在提高开发效率。

for 循环渲染那里

可以自己在data中设置一个变量来等于当前进入的lisitem的index，点击时记录一下，后来的时候用scrollTo到对应的index。

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

欢迎开发小伙伴们进来帮帮楼主

在HarmonyOS鸿蒙Next中，如果你使用轻量级的JS UI框架并希望获取list滚动到的item的index，可以通过监听滚动事件并结合list的数据来实现。以下是一个简要的实现思路：

  1. 监听滚动事件：为list组件添加滚动事件监听器。在鸿蒙的JS UI框架中，这通常涉及到设置onScroll事件处理函数。

  2. 计算滚动位置：在滚动事件处理函数中，通过事件对象获取当前的滚动位置（scrollTop或scrollLeft）。

  3. 计算item的index：根据list的item高度（或宽度，取决于滚动方向）和当前滚动位置，计算出当前可见的item的index。这通常涉及到一些数学运算，如整除和取余。

  4. 更新状态：将计算出的index更新到组件的状态中，以便在UI中使用。

请注意，具体的实现细节可能因鸿蒙系统的版本和JS UI框架的具体实现而有所不同。你可能需要查阅鸿蒙官方的开发文档或示例代码来获取更详细的信息。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部