首先找到他的官网vue-seamless-scroll
1.进行安装依赖
vue2
npm install vue-seamless-scroll --save
vue3
npm install vue3-seamless-scroll --save
2.全局引入
vue2
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
vue3
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
}
}
},
页面