vue-seamless-scroll实现无缝上下滚动与左右滚动

59 阅读 0 评论 39 点赞

我是靠谱客的博主美好嚓茶，最近开发中收集的这篇文章主要介绍vue-seamless-scroll实现无缝上下滚动与左右滚动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

上下滚动与左右滚动是我们很常见的一个功能，利用vue-seamless-scroll可以实现上下滚动与左右滚动，其官方网站地址是https://www.npmjs.com/package/vue-seamless-scroll，可以查看其用法。首先查看一下效果图：

一、npm安装

npm install vue-seamless-scroll --save
二、vue页面引用

（1）import vueSeamless from 'vue-seamless-scroll'

（2）components

vueSeamless

}

三、从下至上滚动

1、html

<div class="echartsRight">
<vueSeamless :data='APIIpList' :class-option="option">
<p v-for="(item, index) in APIIpList" :key="index">{{item.createAt}}，股票行情接口被IP地址{{item.ipAddress}}调用</p>
</vueSeamless>
</div>
2、vue data

option: {
step: 1,
limitMoveNum: 9,
openTouch: false,
waitTime: 1,
direction: 1,
singleHeight: 30
},
APIIpList: []
其中APIIpList为从接口获取数据

3、css

.echartsRight .rowup {
-webkit-animation: 10s rowup linear infinite normal;
animation: 10s rowup linear infinite normal;
position: relative;
}
.echartsRight {
overflow hidden
height 349px
margin-left 20px
width 50%
color #666666
padding 20px 20px
border 1px solid #ECECEC
p {
margin-bottom 20px
// &:last-child {
// margin-bottom 0px
// }
&:hover {
color #65ACDA
}
}
}
四、从右往左滚动

1、html

<div class="userImage">
<vueSeamless :data='userImage' :class-option="optionCustomer">
<ul class="userImageAllWrapper">
<li v-for="item in userImage" :key="item.index">
<img :src="item.img" alt="">
</li>
</ul>
</vueSeamless>
</div>
2、vue data

optionCustomer: {
step: 1,
limitMoveNum: 5,
openTouch: false,
waitTime: 1,
direction: 2,
singleWidth: 30
},
userImage: []
3、css

.userImage {
overflow hidden
.userImageAllWrapper {
width 1160px
list-style none
display flex
flex-wrap wrap
&:last-child {
margin-left -40px
}
li {
margin-right 20px
margin-bottom 20px
padding 10px 30px
border 1px solid #ECECEC
img {
display flex
}
}
}
}
到此即可