目前有u-scroll-list组件2个,想实现在H5页面滑动X轴时,一个u-scroll-list组件的滑动的时候,另一个u-scroll-list组件也能同时移动,而且不能有延时,请问代码怎么写...
时间: 2024-02-05 09:11:50 浏览: 238
这个可以通过监听第一个 `u-scroll-list` 的滚动事件,然后将滚动距离同步给第二个 `u-scroll-list` 实现。
以下是一个简单的实现:
```html
<view class="scroll-container">
<u-scroll-list class="scroll-list" ref="scroll1" @scroll="handleScroll"></u-scroll-list>
<u-scroll-list class="scroll-list" ref="scroll2"></u-scroll-list>
</view>
```
```js
export default {
methods: {
handleScroll(event) {
const scrollDistance = event.target.scrollLeft // 获取滚动距离
this.$refs.scroll2.$el.scrollLeft = scrollDistance // 同步滚动距离给第二个 u-scroll-list
}
}
}
```
这里我们监听了第一个 `u-scroll-list` 的滚动事件 `@scroll`,在事件处理函数中获取滚动距离,并将滚动距离同步给第二个 `u-scroll-list` 的 DOM 元素 `$el` 的 `scrollLeft` 属性。这样第二个 `u-scroll-list` 就会跟随第一个 `u-scroll-list` 的滚动进行移动了。
需要注意的是,由于是在移动端中滑动 X 轴,因此需要在 CSS 中设置 `overflow-x: scroll;` 来让 `u-scroll-list` 具有横向滚动条。
阅读全文