VUE3+ts 使用 vue-seamless-scroll or vue3-seamless-scroll
npm install vue3-seamless-scroll --save
使用页面引入
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
components: { Vue3SeamlessScroll },
如果报错说找不到vue3-seamless-scroll模块 则在src->shims-vue.d.ts 文件中声明
declare module 'vue3-seamless-scroll';
vue3-seamless-scroll 使用中的参数 参考网址https://github.com/xfy520/vue3-seamless-scroll
html
<vue3-seamless-scroll
:list="dataList"
direction="left"
hover="true"
limitScrollNum="5"
:step="0.4"
class="seamless-warp2"
>
<ul class="ul-scoll">
<li v-for="(item, index) in dataList" :key="index">
<img class="img" :src="item.picture" alt="" />
</li>
</ul>
</vue3-seamless-scroll>
css
<style lang="scss" scoped>
.seamless-warp2 {
width: 200px;
overflow: hidden;
.ul-scoll {
display: flex;
}
}
.img {
width: 100px;
}
</style>