频道导航

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

2019-01-07 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了vue的无缝滚动组件vue-seamless-scroll实例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

Installation

NPM

Usage

ES6

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

nofollow" rel="external nofollow" class="white no-underline underline-hover">vue-seamless-scroll

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;
}
}
}
@H_301_105@

new Vue({
components: {
vueSeamlessScroll
}
})

普通模式 (script tag)

Example:

<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"> Document