vue横向滚动,并且实现点击左右按钮来进行滚动
直接上代码,可以点击左和右两个汉字进行横向滚动
<template>
<div class="Home">
<div style="display: flex;height: 100%;align-items: center;">
<div @click="scrollLeft('scrollContainer1')" style="width: 80px;text-align: center;font-size: 30px;">
左
</div>
<div ref="scrollContainer1"
style="height: 100px;width: 1000px;display: flex;justify-content: space-between;overflow-x: auto;">
<span v-for="item in 20"
style="width: 120px;height: 100%;display: inline-block;background: #a3a2a2;margin-right: 5px;flex-shrink: 0;">
{{item}}
</span>
</div>
<div @click="scrollRight('scrollContainer1')" style="width: 80px;text-align: center;font-size: 30px;">
右
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {}
},
mounted() {},
methods: {
scrollLeft(row1) {
this.$refs[row1].scrollBy({
left: -600, // 每次点击滚动的距离
behavior: 'smooth',
});
},
scrollRight(row1) {
this.$refs[row1].scrollBy({
left: 600, // 每次点击滚动的距离
behavior: 'smooth',
});
},
},
}
</script>
<style scoped>
::-webkit-scrollbar {
/* 隐藏滚动条 */
display: none;
}
</style>
