uni.createSelectorQuery 如何循环获取列表的展开和收缩功能

`uni.createSelectorQuery` 是 UniApp 中的一个方法，用于动态查询页面上的节点，常用于实现滚动监听、元素定位等场景。如果你想通过它实现列表的展开和收缩功能，你可以按照以下步骤操作：

1. 首先，创建一个 `SelectorQuery` 对象：

const query = uni.createSelectorQuery();

2. 定义需要操作的列表元素，通常是一个具有展开/收缩状态的组件，如 `list-item-component`：

<view class="list-item-component" data-index="0">
  <!-- 列表内容 -->
  <view @tap="toggleExpand(index)" v-if="item.expanded">展开</view>
  <view>收起</view>
</view>

这里假设 `item.expanded` 控制了当前项是否展开。

3. 在 JavaScript 中编写 `toggleExpand` 方法，用于切换展开状态并更新对应的 DOM 元素：

methods: {
  toggleExpand(index) {
    this.$set(this.items, index, !this.items[index].expanded);
    // 更新视图状态，比如修改数据源，触发渲染
    query.select('.list-item-component[data-index="' + index + '"]').boundingClientRect(); // 获取元素尺寸
    query.exec(callback); // 执行回调函数处理DOM变化
  }
}

4. 当你需要获取元素的尺寸变化（例如，展开时计算高度变化），可以在回调函数中完成：

function callback(responses) {
  const itemRect = responses[0].node.getBoundingClientRect();
  // 根据rect计算展开后的高度或其他样式变化，并处理动画效果
}

5. 最后，在需要的地方调用 `query.exec()`，这一步会在所有子查询完成后一起执行。

注意，为了实现循环获取，你需要对列表中的每个项目分别调用 `toggleExpand` 并传递相应的索引。