方法的使用)
项目场景：
提示：这里简述项目相关背景：
在项目中有时候需要点击按钮（左/右）后向那个方向滚动一下，来展示剩余的内容
与element中的轮播图类似。如下：
scrollby()方法的使用
原因分析：
提示：这里填写问题的分析：
解决方案：
提示：这里填写该问题的具体解决方案：
<template> <!-- 外容器 --> <div class="scrollBox"> <!-- 容器内容 --> <div class="content" ref="refScrollBox"> <!-- 每一项 --> <div class="itemStyle" v-for="item in demoList" :key="item.value"> {{item.name}}值是：{{item.value}} </div> </div> <!-- 左右的按钮 --> <i class="el-icon-arrow-left iconLeft" @click="scrollLeft"></i> <i class="el-icon-arrow-right iconRight" @click="scrollReft"></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>
