官网代码示例:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
参考:https://blog.csdn.net/crazycat2046/article/details/126351165
参考:
https://blog.csdn.net/weixin_42215897/article/details/110194641?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167782442816782427455876%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=167782442816782427455876&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2alltop_positive~default-1-110194641-null-null.142v73insert_down2,201v4add_ask,239v2insert_chatgpt&utm_term=vue-seamless-scroll&spm=1018.2226.3001.4187
npm install vue-seamless-scroll --save
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
components: {
vueSeamlessScroll
}
}
data(){
return:{
listData:[]
}
},
computed: {
classOption() {
return {
step: 0.6, // 数值越大速度滚动越快
limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
<vue-seamless-scroll :data="listData4" class="seamless-warp2" :class-option="classOption">
<div class="main_box" >
<div class="img_box" v-for="(item,index) in listData" :key="index">
<img :src="item.avatar"/>
</div>
</div>
</vue-seamless-scroll>
.seamless-warp2 {
overflow: hidden;
// height: 80px;
width: 100%;
.main_box {
display: flex;
.img_box {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin: 8px 10px;
img {
width: 100%;
height: 100%;
}
}
}
}