安装包
bash
npm install vue3-seamless-scroll --save
全局注册
在main.js中进行全局注册
bash
// **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');
使用组件
数据准备:list是一个对象数组,
bash
const tableData = [
{
date: "2016-05-02",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-07",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-08",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
}
.....
];
html
bash
<vue3-seamless-scroll :list="list" class="scroll">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{item.title}}</span>
<span>{{item.date}}</span>
</div>
</vue3-seamless-scroll>
css
必须设置height和overflow: hidden;
bash
.scroll {
height: 270px;
width: 500px;
margin: 100px auto;
overflow: hidden;
}