vue+vue-seamless-scroll使用示例代码,加中文注释
时间: 2023-10-26 16:37:03 浏览: 164
Vue3 框架 + Element-Plus 库 + mockjs 假数据 + vue3-demo + 环境已经配好拿来就用
<template>
<div class="scroll-wrapper">
<vue-seamless-scroll :list="list" :speed="speed" :step="step" :direction="direction" :pause-on-hover="true">
<template slot-scope="{ item }">
<div class="scroll-item">{{ item }}</div>
</template>
</vue-seamless-scroll>
</div>
</template>
<script>
import VueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
VueSeamlessScroll
},
data() {
return {
list: ['第一条', '第二条', '第三条'], // 滚动列表
speed: 30, // 滚动速度,单位:px/s
step: 1, // 每次滚动距离,单位:px
direction: 'left', // 滚动方向,可选值:left、right、up、down
}
}
}
</script>
<style scoped>
.scroll-wrapper {
width: 200px;
height: 50px;
overflow: hidden;
}
.scroll-item {
height: 50px;
line-height: 50px;
padding: 0 10px;
white-space: nowrap; // 文本不换行
}
</style>
阅读全文