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

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

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

一、npm安装

npminstallvue-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 hiddenheight 349pxmargin-left 20pxwidth 50%color #666666padding 20px 20pxborder 1px solid #ECECECp {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 1160pxlist-style nonedisplay flexflex-wrap wrap&:last-child {margin-left -40px}li {margin-right 20pxmargin-bottom 20pxpadding 10px 30pxborder 1px solid #ECECECimg {display flex}}}}

到此即可