uniapp 左右滚动条联动效果
时间: 2023-09-02 20:07:13 浏览: 108
要实现左右滚动条联动效果,你可以使用 `scroll-view` 组件来实现。下面是一个简单的示例:
```
<template>
<view class="container">
<scroll-view class="left" scroll-y="true" scroll-into-view="{{scrollIntoView}}" scroll-with-animation="{{true}}" bindscroll="onLeftScroll">
<view wx:for="{{list}}" wx:key="{{index}}" wx:scroll-anchor="{{'item'+index}}">
<view class="item" id="{{'item'+index}}">{{item}}</view>
</view>
</scroll-view>
<scroll-view class="right" scroll-y="true" scroll-into-view="{{scrollIntoView}}" scroll-with-animation="{{true}}" bindscroll="onRightScroll">
<view wx:for="{{list}}" wx:key="{{index}}" wx:scroll-anchor="{{'item'+index}}">
<view class="item" id="{{'item'+index}}">{{item}}</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
list: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
scrollIntoView: '',
}
},
methods: {
onLeftScroll(e) {
this.scrollIntoView = 'item' + Math.round(e.detail.scrollTop / 50)
},
onRightScroll(e) {
this.scrollIntoView = 'item' + Math.round(e.detail.scrollTop / 50)
},
},
}
</script>
<style scoped>
.container {
display: flex;
}
.left, .right {
flex: 1;
height: 100vh;
overflow-y: scroll;
}
.item {
height: 50px;
line-height: 50px;
text-align: center;
}
</style>
```
在这个示例中,我们使用两个 `scroll-view` 组件来展示同样的数据列表,同时给每个列表项一个 `id`,用于锚点定位。然后在滚动时,根据左右两个滚动条的滚动位置,计算出当前应该滚动到哪个锚点位置,然后通过 `scroll-into-view` 属性来实现滚动联动效果。注意,为了实现更平滑的滚动效果,我们还开启了 `scroll-with-animation` 属性。
以上代码示例仅供参考,具体实现方式可以根据你的具体需求进行调整。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)