目前有u-scroll-list组件2个,想实现在H5页面滑动X轴时,一个u-scroll-list组件的滑动的时候,另一个u-scroll-list组件也能同时移动,而且不能有延时,请问代码怎么写...
时间: 2023-07-16 17:15:38 浏览: 112
scroll-anim:Animate Scroll React组件
你可以监听一个 u-scroll-list 组件的 scroll 事件,然后通过获取滚动条的位置,再将这个位置应用到另一个 u-scroll-list 组件上,这样就能实现两个组件同时滑动了。具体的代码实现如下:
```html
<template>
<div class="container">
<u-scroll-list ref="list1" :scrollbar="true" @scroll="handleScroll"></u-scroll-list>
<u-scroll-list ref="list2" :scrollbar="true"></u-scroll-list>
</div>
</template>
<script>
export default {
methods: {
handleScroll() {
const scrollTop = this.$refs.list1.$el.scrollTop
this.$refs.list2.$el.scrollTop = scrollTop
}
}
}
</script>
```
在这个例子中,我们监听了第一个 u-scroll-list 组件的 scroll 事件,获取了它的 scrollTop 值,并将这个值应用到了第二个 u-scroll-list 组件上,从而实现了两个组件的同时滑动。
阅读全文