微信小程序如何控制滚动scroll-view滚动到指定的view的id的位置
时间: 2023-08-15 10:08:45 浏览: 160
要控制scroll-view滚动到指定的view的id的位置,可以使用scroll-view组件的scrollIntoView方法。具体操作步骤如下:
1. 在需要滚动到的目标view上设置id属性。
2. 在scroll-view组件上设置scroll-into-view属性,值为目标view的id值。
3. 在需要触发滚动的事件中,调用scroll-view组件的scrollIntoView方法,将目标view的id值作为参数传入即可。
示例代码如下:
.wxml文件:
```
<scroll-view scroll-into-view="{{toView}}" scroll-y="true">
<view id="view1">View1</view>
<view id="view2">View2</view>
<view id="view3">View3</view>
</scroll-view>
<button bindtap="scrollToView">滚动到View2</button>
```
.js文件:
```
Page({
data: {
toView: ''
},
scrollToView: function () {
this.setData({
toView: 'view2'
})
this.selectComponent('#scroll-view').scrollIntoView('view2')
}
})
```
在上面的示例中,scroll-into-view属性值绑定了data中的toView变量,当toView变量的值改变时,scroll-view组件就会滚动到对应的view。在按钮的tap事件中,我们将toView变量的值设置为'view2',然后调用scrollIntoView方法将scroll-view组件滚动到view2的位置。
注意:scrollIntoView方法需要在使用前获取scroll-view组件的上下文,可以通过this.selectComponent方法来获取,需要在组件上设置一个id属性,然后在selectComponent方法中传入该id值。
阅读全文