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

                           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

              
                  
{{item.createAt}}，股票行情接口被IP地址{{item.ipAddress}}调用
              
            

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

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
            }
          }
        }
      }

到此即可