vuescroll
Version:
A beautiful scrollbar based on Vue.js for PC and mobile.
127 lines (115 loc) • 3.4 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>
html,
body {
height: 90%;
}
#app {
width: 100%;
height: 100%;
}
#operateArea {
float: left;
margin-left: 10px;
;
}
#parent {
float: left;
width: 400px;
height: 400px;
white-space: nowrap;
}
.content {
display: inline-block;
margin-right: -6px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
transition: all 2s;
opacity: 0.8;
}
.content span {
vertical-align: middle;
}
.vuescroll-panel {
white-space: nowrap;
}
</style>
</head>
<body>
<div id="app">
<div id="parent">
<!-- bind your own options in data -->
<vue-scroll :ops="ops" ref="vs">
<template v-for="(item, index) in randomArray">
<div class="content" :key="index" :style="{backgroundColor: item}">
<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>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
ops: {
vuescroll: {
mode: "slide",
snapping: {
enable: true
}
},
bar: {
vBar: {
background: "#000"
},
hBar: {
background: "#000"
}
}
},
dataNums: 100,
reRender: 1
},
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();
})
}
}
})
</script>
</body>
</html>