使用uview的组件库,现在又u-scroll-list组件2个,想实现在H5页面滑动时,一个u-scroll-list组件的滑动的时候,另一个u-scroll-list组件也能同时移动,而且不能有延时,请问代码怎么写
时间: 2023-03-01 22:06:38 浏览: 90
h5滑动页面
5星 · 资源好评率100%
您可以在两个u-scroll-list组件的同一个父组件中,通过v-on指令监听滚动事件,在滚动事件的回调函数中,通过JavaScript操作两个u-scroll-list组件的scrollTop属性,使它们同时滚动。下面是一个示例代码:
```
<template>
<div>
<u-scroll-list ref="scrollList1" @scroll="handleScroll"/>
<u-scroll-list ref="scrollList2" @scroll="handleScroll"/>
</div>
</template>
<script>
export default {
methods: {
handleScroll(e) {
this.$refs.scrollList1.scrollTop = e.target.scrollTop;
this.$refs.scrollList2.scrollTop = e.target.scrollTop;
}
}
};
</script>
```
在这个示例代码中,我们通过ref指令为两个u-scroll-list组件设置了句柄,然后在v-on指令中监听了滚动事件,在滚动事件的回调函数中,我们通过this.$refs访问了两个u-scroll-list组件的句柄,并且同步了它们的scrollTop属性。
阅读全文