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
            }
          }
        }
      }
到此即可