Vue3.0 无缝滚动组件,支持Vite2.0,支持服务端打包
官方git地址
npm安装
npm install vue3-seamless-scroll --save
yarn安装
yarn add vue3-seamless-scroll
browser安装
<script src="https://unpkg.com/browse/[email protected]/dist/vue3-seamless-scroll.min.js"></script>
使用(全局注册)
// **main.js**
import { createApp } from 'vue';
import App from './App.vue';
import vue3SeamlessScroll from "vue3-seamless-scroll";
const app = createApp(App);
app.use(vue3SeamlessScroll);
app.mount('#app');
单个.vue文件局部注册
<script>
import { defineComponent } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
components: {
Vue3SeamlessScroll
}
})
</script>
具体组件使用例子
<template>
<vue3-seamless-scroll :list="list" class="scroll" :step="0.5">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default {
name: "index",
components: {
Vue3SeamlessScroll,
},
setup() {
const router = useRouter();
const state = reactive({
list: [
{
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",
},
],
});
return {
...toRefs(state),
};
},
};
</script>
<style lang='scss' scoped>
.scroll {
height: 200px;
width: 500px;
margin: 100px auto;
overflow: hidden;
}
.scroll .item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px 0;
}
</style>