轮播 vue3-seamless-scroll (vite+vue3)
大屏滚动 无缝连接(vue3vite)
1.官方地址 https://www.npmjs.com/package/vue3-seamless-scroll
2.安装
npm (npm install vue3-seamless-scroll --save)
Yarn (yarn add vue3-seamless-scroll)
browser (<script src="https://unpkg.com/browse/vue3-seamless-scroll@1.0.2/dist/vue3-seamless-scroll.min.js"></script>
)
3.全局注册
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');
4.局部注册
<script>
import { defineComponent } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
components: {
Vue3SeamlessScroll
}
})
</script>
5.具体使用
<template>
<vue3-seamless-scroll :list="list" class="scroll">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{item}}</span>
</div>
</vue3-seamless-scroll>
</template>
<script>
import { defineComponent, ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
name: "App",
components: {
Vue3SeamlessScroll
},
setup() {
const list = ref([
'第一行','第二行','第三行','第四行','第五行','第六行','第七行','第八行','第九行'
]);
return { list };
},
});
</script>
<style>
.scroll {
height: 250px;
width: 300px;
margin: 80px auto;
overflow: hidden;
}
.scroll .item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
}
</style>
6.具体使用属性 请参考官网(1)
更多推荐
所有评论(0)