如何微信小程序如何获取scroll-view索引

在微信小程序中，可以通过scroll-view组件的scroll事件来获取滚动条位置，从而计算出当前滚动到了哪个索引。

具体实现方法如下：

1. 在scroll-view组件上绑定一个scroll事件，如下所示：

<scroll-view scroll-y="true" bindscroll="onScroll">
  <!-- scroll-view内容 -->
</scroll-view>

2. 在Page或Component的js文件中，定义一个onScroll方法来处理scroll事件，如下所示：

Page({
  data: {
    currentIndex: 0
  },
  onScroll: function(e) {
    // 获取当前滚动条位置
    var scrollTop = e.detail.scrollTop;
    // 计算当前滚动到了哪个索引
    var index = Math.floor(scrollTop / 每个item的高度);
    // 更新当前索引
    this.setData({
      currentIndex: index
    });
  }
})

在上面的代码中，我们通过Math.floor(scrollTop / 每个item的高度)来计算当前滚动到了哪个索引，然后通过setData方法来更新当前索引。其中，每个item的高度可以根据实际情况来设置。

相关问题

微信小程序如何获取scroll-view索引

在微信小程序中，可以通过在 scroll-view 组件上绑定 bindscrolltoupper 事件，在事件回调函数中通过 e.detail.scrollTop 属性获取 scroll-view 的索引。

例如：

<scroll-view bindscrolltoupper="getIndex" >
  <!-- scroll-view content -->
</scroll-view>

Page({
  getIndex: function(e) {
    console.log(e.detail.scrollTop)
  }
})

当然还有其他的事件如bindscroll,bindscrollbottom,bindscrolltolower可以根据需要选择使用。

微信小程序使用scroll-view里面有一个for循环多条数据，我需要点击侧边导航栏滚动到指定位置上，麻烦你帮我实现

好的，下面是一个在 `scroll-view` 中使用侧边导航栏滚动到指定位置的示例代码：

<scroll-view scroll-y="true" scroll-with-animation="true" class="scroll-view-class">
  <view class="content">
    <view class="section" wx:for="{{sections}}" wx:key="index" id="section{{index}}">
      <view class="title">{{item.title}}</view>
      <view class="list" wx:for="{{item.list}}" wx:key="index">
        <text>{{index + 1}}. {{item}}</text>
      </view>
    </view>
  </view>
</scroll-view>
<view class="sidebar">
  <scroll-view scroll-y="true" scroll-with-animation="true">
    <view wx:for="{{sections}}" wx:key="index" class="sidebar-item" data-index="{{index}}" bindtap="scrollToSection">{{item.title}}</view>
  </scroll-view>
</view>

在这个示例代码中，我们首先在 `scroll-view` 中使用了一个 `wx:for` 循环来渲染多条数据，并为每个 `section` 元素设置了一个唯一的 `id`。接着，我们在页面的底部添加了一个侧边导航栏，使用了另一个 `scroll-view` 来实现滚动，并将 `sections` 中的每个元素渲染为一个 `sidebar-item` 元素。在 `sidebar-item` 元素中，我们使用了 `data-index` 属性来存储该元素对应的 `section` 元素的索引，并将 `scrollToSection` 函数绑定到了 `bindtap` 事件上。

接下来，我们需要在 JavaScript 中实现 `scrollToSection` 函数，该函数用于滚动到指定的 `section` 元素位置：

Page({
  data: {
    sections: [
      {
        title: 'Section 1',
        list: ['Item 1', 'Item 2', 'Item 3']
      },
      {
        title: 'Section 2',
        list: ['Item 4', 'Item 5', 'Item 6']
      },
      {
        title: 'Section 3',
        list: ['Item 7', 'Item 8', 'Item 9']
      }
    ]
  },
  scrollToSection(e) {
    const index = e.currentTarget.dataset.index;
    const id = `#section${index}`;
    wx.createSelectorQuery().select(id).boundingClientRect(res => {
      if (res) {
        wx.pageScrollTo({
          scrollTop: res.top,
          duration: 300
        });
      }
    }).exec();
  }
})

在这个示例代码中，我们首先定义了一个 `scrollToSection` 函数，该函数通过 `e.currentTarget.dataset.index` 获取了当前点击的侧边导航栏元素对应的 `section` 元素的索引，并使用 `wx.createSelectorQuery` 方法获取到该元素的位置信息。接着，我们使用 `wx.pageScrollTo` 方法滚动到该元素的位置，并将滚动时长设置为 300ms。注意，在使用 `wx.createSelectorQuery` 方法获取元素位置信息时，我们需要使用 `#` 符号加上元素的 `id`，例如 `#section0`。

这样，我们就实现了在 `scroll-view` 中使用侧边导航栏滚动到指定位置的功能。您可以根据您的实际需求进行调整。