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

╰半橙微兮° 2022-03-29 14:48 603阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70][]

一、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

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

到此即可

![20190108225911278.jpg][]

[https_www.npmjs.com_package_vue-seamless-scroll]: https://www.npmjs.com/package/vue-seamless-scroll
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70]: /images/20220329/e1d92e06a4c24bc9b986012ec613b1f3.png
[20190108225911278.jpg]: /images/20220329/4d8d04ac236a4c499ea5c025007f6502.png