控制页面内容 点击向左/右移动 滚动scrollby()方法的使用

项目场景提示这里简述项目相关背景在项目中有时候需要点击按钮左/右后向那个方向滚动一下来展示剩余的内容与element中的轮播图类似。如下scrollby()方法的使用原因分析提示这里填写问题的分析解决方案提示这里填写该问题的具体解决方案template !-- 外容器 -- div classscrollBox !-- 容器内容 -- div classcontent refrefScrollBox !-- 每一项 -- div classitemStyle v-foritem in demoList :keyitem.value {{item.name}}值是{{item.value}} /div /div !-- 左右的按钮 -- i classel-icon-arrow-left iconLeft clickscrollLeft/i i classel-icon-arrow-right iconRight clickscrollReft/i /div /template script export default { name: ScrollBy, components: { }, data() { return { demoList:[ { name:demo1, value:1, }, { name:demo2, value:2, }, { name:demo3, value:3, }, { name:demo4, value:4, }, { name:demo5, value:5, }, { name:demo6, value:6, }, { name:demo7, value:7, }, ] } }, methods: { //auto默认或 smooth平滑滚动 scrollLeft(){ this.$refs.refScrollBox.scrollBy({ left: -135, behavior: smooth }) }, scrollReft(){ this.$refs.refScrollBox.scrollBy({ left: 135, behavior: smooth }) } } } /script style scoped .scrollBox{ width: 570px; border: 1px solid black; position: relative; } .content{ display: flex; overflow-x: hidden; } .itemStyle{ width: 100px; min-width: 100px; height: 100px; background-color: red; margin-right: 35px; display: flex; justify-content: center; align-items: center; font-size:18px; } .content:nth-child(1){ margin-left: 35px; } .iconLeft{ font-size: 30px; position: absolute; left: 0; top: 40%; color: black; cursor: pointer; } .iconRight{ font-size: 30px; position: absolute; right: 0; top: 40%; color: black; cursor: pointer; } /style