有两个uniapp的scroll-view组件,只能左右滑动,当滑动一个scroll-view组件的时候,另一个scroll-view组件可以同步滑动,这个代码要怎么写
时间: 2023-02-23 19:55:10 浏览: 174
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
可以使用uniapp的bindscroll事件实现同步滑动。首先,在scroll-view组件上绑定bindscroll事件,然后在该事件处理函数中设置另一个scroll-view组件的滚动位置。
具体代码如下:
<template>
<view>
<scroll-view
class="scroll-view-1"
scroll-x
:scroll-left="scrollLeft1"
@scroll="handleScroll1"
>
</scroll-view>
<scroll-view
class="scroll-view-2"
scroll-x
:scroll-left="scrollLeft2"
@scroll="handleScroll2"
>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
scrollLeft1: 0,
scrollLeft2: 0
};
},
methods: {
handleScroll1(e) {
this.scrollLeft1 = e.detail.scrollLeft;
this.scrollLeft2 = e.detail.scrollLeft;
},
handleScroll2(e) {
this.scrollLeft2 = e.detail.scrollLeft;
this.scrollLeft1 = e.detail.scrollLeft;
}
}
};
</script>
在上面的代码中,当第一个scroll-view组件滑动时,会触发handleScroll1函数,该函数设置第二个scroll-view组件的滚动位置;当第二个scroll-view组件滑动时,会触发handleScroll2函数,该函数设置第一个scroll-view组件的滚动位置。
注意:需要给scroll-view组件设置scroll-x属性,以支持水平滑动。
阅读全文