vue3中使用组件 vue3-seamless-scroll
安装:npm install vue3-seamless-scroll 或者 yarn add vue3-seamless-scroll
在main.js中引用vue3SeamlessScroll
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')
即可在页面中使用
<template>
<vue3-seamless-scroll :list="hzqyList" direction="right" :isWatch="true" :count="999" :copyNum="99" :hover="false" :singleHeight="0" :singleWidth="0" :step="0.5" :singleWaitTime="0" :limitScrollNum="hzqyList.length" :singleLine="true" class="scroll">
<div class=" w-full h-[8rem] flex items-center">
<div v-for="(item, i) in hzqyList" :key="i" class="px-[.2rem] mx-[.5rem] bg-white rounded-lg yy">
<img :src="item.logo" class="h-[6rem] w-[6rem] rounded-lg">
</div>
</div>
</vue3-seamless-scroll>
</template>
<script setup>
import { ref } from 'vue';
const hzqyList=ref[
{logo:""},
{logo:""},
{logo:""},
{logo:""},
{logo:""},
{logo:""} //图片地址
]
</script>
vue2中使用组件 vue-seamless-scroll
安装:npm install vue-seamless-scroll --save 或者 yarn add vue-seamless-scroll
在页面中直接引用即可
<template>
<div>
<div class="flex justify-around text-[#A7D3FF] text-center mt-[8px]">
<div class="w-[48px]">序号</div>
<div class="w-[60px]">姓名</div>
</div>
<vueSeamlessScroll :data="zthdList" :class-option="optionHover" class="h-[380px] overflow-y-scroll">
<div
class="flex justify-around items-center text-center banm"
v-for="(item,i) in zthdList"
:key="i"
>
<div class="w-[48px]">{{i+1}}</div>
<div class="w-[60px]">{{item.name}}</div>
</div>
</vueSeamlessScroll>
</div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
components: {
vueSeamlessScroll
},
data(){
return {
zthdList: [
{name:"张三"},
{name:"李四"},
{name:"王五"},
{name:"张三"},
{name:"张三"},
{name:"张三"},
{name:"张三"},
{name:"张三"}
],
optionHover: {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
autoPlay: true, // 是否自动滚动
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
},
};
}
}