目录
1、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击移动</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app">
<div class="content_box" ref="refScrollLeft">
<div class="item" v-for="item in 24" :key="item" @click="clickMovement(item)">{{item}}
</div>
</div>
</div>
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
2、JavaScript
new Vue({
el: "#app",
data() {
return {
oldVal: 0,
scrollLeft: 0
}
},
mounted() {
},
methods: {
clickMovement(val) {
if (val > this.oldVal) {
this.scrollLeft = this.scrollLeft + 180;
} else {
this.scrollLeft = this.scrollLeft - 180;
}
// 关键代码
this.$refs.refScrollLeft.scrollLeft = this.scrollLeft;
this.oldVal = val;
}
}
});
3、css
#app {
position: absolute;
left: 50%;
transform: translate(-50%, );
}
.content_box {
width: 300px;
display: flex;
align-items: center;
padding: 1em 0;
overflow-x: scroll;
}
.content_box::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
.item {
height: 2em;
text-align: center;
line-height: 2em;
background-color: #686868;
color: #fff;
margin: 0 10px;
padding: 0 1em;
cursor: pointer;
}