使用
全局使用
js
// main.js
import { createApp } from "vue"
import vueScrollComponents from "vue-scroll-components"
import App from "./App.vue"
const app = createApp(App)
app.use(vueScrollComponentfrom)
app.mount("#app");
组件内使用
vue
<!-- index.vue -->
<template>
<vueScrollComponents :data="data" v-model:scroll="scroll" class="wrap" :options="options">
<ul class="item">
<li v-for="(item, index) in data" :key="index">
<span class="title">{{item.title}}</span>
<span class="date">{{tem.date}}</span>
</li>
</ul>
</vueScrollComponents>
</template>
<script setup>
import { ref } from "vue"
import vueScrollComponents from "vue-scroll-components"
const options = ref({
direction: 'up',
speed: 1,
})
const scroll = ref(true)
const data = ref([{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}])
</script>
<style scoped>
.wrap {
height: 256px;
width: 360px;
margin: 0 auto;
overflow: hidden;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
}
li {
height: 32px;
line-height: 32px;
display: flex;
justify-content: space-between;
}
</style>