vue的无缝滚动组件vue-seamless-scroll实例

Installation

NPM

rush:xhtml;"> npm install vue-seamless-scroll --save

Usage

ES6

以下es6用法需要webpack环境编译.

rush:xhtml;">

<style lang="scss">

app {

padding-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 100px;

}
.flex-fill {
-ms-flex: 1 1;
flex: 1 1;
}
.options {
width: 300px;
font-size: 15px;
margin-right: 60px;
p {
color: #000;
margin-bottom: 30px;
b {
font-size: 16px;
font-style: italic;
}
}
}
.wd800 {
width: 800px;
margin: 30px auto;
}
.warp {
height: 260px;
width: 360px;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li {
height: 30px;
line-height: 30px;
display: flex;
justify-content: space-between;
font-size: 15px;
}
}
}
@media screen and (max-width: 770px) {
.warp {
width: 90%;
margin: 0 auto;
}
body {
background-color: lightblue;
}
.wd800 {
width: 100%;
}
.flex.wd800 {
display: block;
}
.options {
width: 90%;
margin: 20px auto;
p {
margin-bottom:0;
}
}
}

rush:xhtml;"> import Vue from 'vue' import vueSeamlessScroll from 'vue-seamless-scroll'

new Vue({
components: {
vueSeamlessScroll
}
})

普通模式 (script tag)

Example:

rush:xhtml;"> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge">

copy-data="listData = listData.concat(listData)" class="warp">

rush:xhtml;"> ...

Configure

rush:xhtml;"> defaultOption () { return { step: 1,//步长 越大滚动速度越快 limitMoveNum: 5,//启动无缝滚动最小数据量 this.dataList.length hoverStop: true,//是否启用鼠标hover控制 direction: 1,//1 往上 0 往下 openWatch: true,//开启data实时监听 singleHeight: 0,//单条数据高度有值hoverStop关闭 waitTime: 1000 //单步停止等待时间 } }

TKS

vue-seamless-scroll发现bug或者有什么不足望指点,感觉不错点个star吧。