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

发布时间：2020-12-17 02:40:24 所属栏目：百科来源：网络整理

导读：Installation NPM Usage ES6 以下es6用法需要webpack环境编译. demo1 向上无缝滚动,hover可停止 var option = { step: 0.5, limitMoveNum: 5 } demo2 limitMoveNum过大不滚动开启了openWatch 3s后data增加到9条 var option = { limitMoveNum: 7 } demo3 lim

Installation

NPM

Usage

ES6

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

demo1 向上无缝滚动,hover可停止

var option = {
step: 0.5,
limitMoveNum: 5
}

demo2 limitMoveNum过大不滚动开启了openWatch

3s后data增加到9条

var option = {
limitMoveNum: 7
}

demo3 limitMoveNum过大不滚动关闭了openWatch

3s后data增加到9条

var option = {
limitMoveNum: 7
openWatch: false
}

demo4 向下滚动,禁止了hover悬停

var option = {
limitMoveNum: 5,
direction: 0,
hoverStop: false,
}

demo5 向上无缝滚动,单条停止一段时间

var option = {
step: 0.5,
limitMoveNum: 5
singleHeight: 30,
waitTime: 1000
}

app {

padding-bottom: 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;
}
}
}

new Vue({
components: {
vueSeamlessScroll
}
})

普通模式 (script tag)

Example:

Document

...

Configure

TKS

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!