vue-seamless-scroll无缝滚动组件

最新推荐文章于 2024-05-07 01:27:30 发布

加油，前进

最新推荐文章于 2024-05-07 01:27:30 发布

阅读量569

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_63954739/article/details/134847827

版权

首先找到他的官网vue-seamless-scroll

1.进行安装依赖

npm install vue-seamless-scroll --save

npm install vue3-seamless-scroll --save

2.全局引入

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

 import vue3SeamlessScroll from "vue3-seamless-scroll";
  app.use(vue3SeamlessScroll);

局部引入

vue2或vue3

<Scroll></Scroll>


import Scroll from 'vue-seamless-scroll'     
components: {                                            
        Scroll
},

3.看官网组件的使用，一个小例子

<vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
     <ul class="item">
            <li v-for="item in newsList" v-text="item.title"></li>
      </ul>
 </vue-seamless-scroll>

data() {
    return {     
      newsList: [{
                   'title': 'A simple, seamless scrolling for Vue.js'
                  },
                  {
                   'title': 'A curated list of awesome things related to Vue.js'
                   }]
    };
  },
computed: {
            optionLeft () {
               return {
                        direction: 2,
                        limitMoveNum: 2
                       }
                }
          },

页面