微信小程序使用scroll-view里面有一个for循环多条数据,我需要点击侧边导航栏滚动到指定位置上,麻烦你帮我实现
时间: 2024-03-11 19:48:56 浏览: 155
微信小程序点击滚动到指定位置的实现
5星 · 资源好评率100%
好的,下面是一个在 `scroll-view` 中使用侧边导航栏滚动到指定位置的示例代码:
```html
<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` 元素位置:
```javascript
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` 中使用侧边导航栏滚动到指定位置的功能。您可以根据您的实际需求进行调整。
阅读全文