vuescroll
Version:
A beautiful scrollbar based on Vue.js for PC and mobile.
324 lines (312 loc) • 13 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
<script src="../dist/vuescroll.js"></script>
<link rel="stylesheet" href="../dist/vuescroll.css">
<style>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
overflow: hidden;
}
#app {
width: 100%;
height: 90%;
padding-bottom: 10px;
}
#operateArea {
float: left;
width: 40%;
}
#parent {
float: left;
width: 60%;
height: 500px;
}
.content {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
transition: all 2s;
opacity: 0.8;
}
.vuescroll-panel {
white-space: nowrap;
}
</style>
</head>
<body>
<div id="app">
<vue-scroll :ops="{scrollPanel: {scrollingX: false}}">
<div id="parent">
<!-- bind your own options in data -->
<vue-scroll :ops="ops" ref="vs" @handle-scroll="handleScroll" @refresh-activate="refreshActivate" @refresh-before-deactivate="refreshBeforeDeactivate"
@refresh-deactivate="refreshDeactivate" @refresh-start="refreshStart" @load-activate="loadActivate" @load-before-deactivate="loadBeforeDeactivate"
@load-deactivate="loadDeactivate" @load-start="loadStart" @handle-scroll-complete="handleComplete">
<template v-for="(item, index) in randomArray">
<div class="content" :key="index" :style="{backgroundColor: item}" :id="'d' + (index + 1)">
<span>{{index+1 + '.' + item}}</span>
</div>
<br v-if="(index+1) % 8 == 0" />
</template>
</vue-scroll>
</div>
<div id="operateArea">
<p align="center">
<a href="https://github.com/YvesCoding">
<img src="http://vuescrolljs.yvescoding.org/logo.png" width="90" height="58">
</a>
</p>
<fieldset>
<legend>operation panel</legend>
<fieldset>
<legend>common</legend>
mode:
<br> native:
<input type="radio" value="native" v-model="ops.vuescroll.mode"> slide:
<input type="radio" value="slide" v-model="ops.vuescroll.mode"> pure-native:
<input type="radio" value="pure-native" v-model="ops.vuescroll.mode">
<br>bar-background:</br>
vBar:
<input type="text" v-model="ops.bar.vBar.background"> hBar:
<input type="text" v-model="ops.bar.hBar.background">
<br>rail-background:</br>
vRail:
<input type="text" v-model="ops.rail.vRail.background"> hRail:
<input type="text" v-model="ops.rail.hRail.background">
<br>keepShow:</br>
vBar: yes:
<input type="radio" v-model="ops.bar.vBar.keepShow" :value="true">no:
<input type="radio" :value="false" v-model="ops.bar.vBar.keepShow"> hBar: yes:
<input type="radio" v-model="ops.bar.hBar.keepShow" :value="true">no:
<input type="radio" :value="false" v-model="ops.bar.hBar.keepShow">
<br>width/height(Only For Rail):</br>
vRail:
<input type="text" v-model="ops.rail.vRail.width"> hRail:
<input type="text" v-model="ops.rail.hRail.height">
<br>opacity(Both For Rail And Bar):</br>
vRail:
<input type="number" v-model="ops.rail.vRail.opacity" step="0.1" min="0"> hRail:
<input type="number" step="0.1" min="0" v-model="ops.rail.hRail.opacity">
<br> vBar:
<input type="number" step="0.1" min="0" v-model="ops.bar.vBar.opacity"> hBar:
<input type="number" step="0.1" min="0" v-model="ops.bar.hBar.opacity">
<br>speed:
<br>
<input type="number" v-model="ops.scrollPanel.speed" min="100" max="5000">
<br>scrollingX:
<br> true:
<input type="radio" :value="true" v-model="ops.scrollPanel.scrollingX"> false:
<input type="radio" :value="false" v-model="ops.scrollPanel.scrollingX">
<br>scrollingY:
<br> true:
<input type="radio" :value="true" v-model="ops.scrollPanel.scrollingY"> false:
<input type="radio" :value="false" v-model="ops.scrollPanel.scrollingY">
<br>zooming:
<br> true:
<input type="radio" :value="true" v-model="ops.vuescroll.zooming"> false:
<input type="radio" :value="false" v-model="ops.vuescroll.zooming">
<br> scrollBy:
<br> dx:
<input type="text" v-model="dx">
<br> dy:
<input type="text" v-model="dy">
<br />
<button @click="scrollBy">go</button>
</fieldset>
<fieldset>
<legend>slide-mode</legend>
refresh:
<br> enable:
<input type="radio" :value="true" v-model="ops.vuescroll.pullRefresh.enable"> disable:
<input type="radio" :value="false" v-model="ops.vuescroll.pullRefresh.enable">
<br>load:
<br> enable:
<input type="radio" :value="true" v-model="ops.vuescroll.pushLoad.enable"> disable:
<input type="radio" :value="false" v-model="ops.vuescroll.pushLoad.enable">
</fieldset>
<fieldset>
<legend>native-mode</legend>
animate:
<br>
<select v-model="ops.scrollPanel.easing">
<option v-for="easing in easings" :value="easing">
{{easing}}
</option>
</select>
</fieldset>
</fieldset>
</div>
</vue-scroll>
</div>
<script>
var easings = [
'easeInQuad',
'easeOutQuad',
'easeInOutQuad',
'easeInCubic',
'easeOutCubic',
'easeInOutCubic',
'easeInQuart',
'easeOutQuart',
'easeInOutQuart',
'easeInQuint',
'easeOutQuint',
'easeInOutQuint'
]
var vm = new Vue({
el: "#app",
data: {
ops: {
vuescroll: {
mode: "slide",
pullRefresh: {
tips: {
beforeDeactive: "Refresh Successfully!"
},
enable: true
},
pushLoad: {
tips: {
beforeDeactive: "Load Successfully!"
},
enable: true
},
paging: false,
zooming: false,
sizeStrategy: "number"
},
scrollPanel: {
easing: "easeInQuad",
speed: 300,
scrollingX: true,
scrollingY: true
},
bar: {
showDelay: 1000,
vBar: {
background: undefined,
keepShow: false,
opacity: 1
},
hBar: {
background: undefined,
keepShow: false,
opacity: 1
}
},
rail: {
vRail: {
background: undefined,
width: "6px",
opacity: 0.5
},
hRail: {
background: undefined,
height: "6px",
opacity: 0.5
}
}
},
dataNums: 220,
reRender: 1,
easings: easings,
dx: 0,
dy: 0
},
computed: {
randomArray() {
function getRandom() {
let str = "#";
for (let i = 0; i < 6; i++) {
str += Math.floor(Math.random() * 16).toString(16);
}
return str;
}
return this.reRender && Array.apply(null, {
length: this.dataNums
}).map(item => {
return getRandom();
})
}
},
methods: {
handleScroll(v) {
if (v.process == 1 && !this.ops.vuescroll.pushLoad.enable) {
this.dataNums += 20;
}
},
getCurrentviewDom() {
console.log(this.$refs['vs'].getCurrentviewDom());
},
handleComplete(v, h) {
console.log(v, h);
},
refresh() {
this.reRender++;
},
refreshActivate(vm, refreshDom) {
console.log(vm, refreshDom, 'refreshActive');
},
refreshBeforeDeactivate(vm, refreshDom, done) {
console.log(vm, refreshDom, 'refreshBeforeDeactive');
setTimeout(() => {
done();
}, 500)
},
refreshDeactivate(vm, refreshDom) {
console.log(vm, refreshDom, 'refreshDeactive');
},
refreshStart(vm, dom, done) {
setTimeout(() => {
this.reRender++;
done();
}, 2000);
},
loadActivate(vm, loadDom) {
console.log(vm, loadDom, 'loadActive');
},
loadBeforeDeactivate(vm, loadDom, done) {
console.log(vm, loadDom, 'loadBeforeDeactive');
setTimeout(() => {
if (this.add) {
this.dataNums += 100;
}
done();
}, 500)
},
loadDeactivate(vm, loadDom) {
console.log(vm, loadDom, 'loadDeactive');
},
loadStart(vm, dom, done) {
setTimeout(() => {
done();
if (Math.random() < 0.5) {
this.add = true;
this.ops.vuescroll.pushLoad.tips.beforeDeactive = "load successfully!";
} else {
this.add = false;
this.ops.vuescroll.pushLoad.tips.beforeDeactive = "no more data!";
}
}, 2000);
},
scrollBy() {
this.$refs['vs'].scrollBy({
dx: this.dx,
dy: this.dy
})
}
}
})
</script>
</body>
</html>