You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
4.4 KiB
140 lines
4.4 KiB
5 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>vue-happy-scroll</title>
|
||
|
|
<link rel="stylesheet" href="./happy-scroll.css">
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
|
|
<script src="./happy-scroll.js"></script>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
html, body, #app{
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#app {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 18px;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buttons{
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container{
|
||
|
|
width: 300px;
|
||
|
|
height: 280px;
|
||
|
|
background: #f6f6f6;
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px solid #4fc08d;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-box {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.text-box > li{
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 28px;
|
||
|
|
}
|
||
|
|
.text-box > li:nth-child(odd){
|
||
|
|
background-color: #eee
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app">
|
||
|
|
<div class="buttons">
|
||
|
|
<el-button @click="length++">增加1条</el-button>
|
||
|
|
<el-button @click="length+=10">增加10条</el-button>
|
||
|
|
<el-button @click="length > 0 && length--">减少1条</el-button>
|
||
|
|
<el-button @click="scrollTop+=10">向下滚动10px</el-button>
|
||
|
|
<el-button @click="scrollTop > 0 && (scrollTop-=10)">向上滚动10px</el-button>
|
||
|
|
<a href="https://github.com/tangdaohai/vue-happy-scroll" target="_black"><el-button type="success">GitHub</el-button></a>
|
||
|
|
</div>
|
||
|
|
<div>当前Top: {{scrollTop}}</div>
|
||
|
|
<div class="container">
|
||
|
|
<happy-scroll
|
||
|
|
size="6"
|
||
|
|
:min-length-v="0.15"
|
||
|
|
left
|
||
|
|
:scroll-left.sync="scrollLeft"
|
||
|
|
:scroll-top.sync="scrollTop"
|
||
|
|
bigger-move-h="start"
|
||
|
|
smaller-move-h="end"
|
||
|
|
@vertical-start="start"
|
||
|
|
@vertical-end="end"
|
||
|
|
color="rgba(79, 192, 141, .7)"
|
||
|
|
resize>
|
||
|
|
<ul class="text-box">
|
||
|
|
<li>回答 - 北岛。诗中展现了悲愤之极的冷峻，以坚定的口吻表达了对暴力世界的怀疑。</li>
|
||
|
|
<li v-for="index in length">{{text[index % text.length]}}</li>
|
||
|
|
</ul>
|
||
|
|
</happy-scroll>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
new Vue({
|
||
|
|
el: '#app',
|
||
|
|
data: function () {
|
||
|
|
return {
|
||
|
|
hideHorizontal: true,
|
||
|
|
length: 12,
|
||
|
|
scrollTop: 0,
|
||
|
|
scrollLeft: 0,
|
||
|
|
text: [
|
||
|
|
'卑鄙是卑鄙者的通行证，',
|
||
|
|
'高尚是高尚者的墓志铭。',
|
||
|
|
'看吧，在那镀金的天空中，',
|
||
|
|
'飘满了死者弯曲的倒影。',
|
||
|
|
'冰川纪过去了，',
|
||
|
|
'为什么到处都是冰凌？',
|
||
|
|
'好望角发现了，',
|
||
|
|
'为什么死海里千帆相竞？',
|
||
|
|
'我来到这个世界上，',
|
||
|
|
'只带着纸、绳索和身影，',
|
||
|
|
'为了在审判之前，',
|
||
|
|
'宣读那些被判决了的声音：',
|
||
|
|
'告诉你吧，世界，',
|
||
|
|
'我——不——相——信！',
|
||
|
|
'纵使你脚下有一千名挑战者，',
|
||
|
|
'那就把我算做第一千零一名。',
|
||
|
|
'我不相信天是蓝的，',
|
||
|
|
'我不相信雷的回声；',
|
||
|
|
'我不相信梦是假的，',
|
||
|
|
'我不相信死无报应。',
|
||
|
|
'如果海洋注定要决堤，',
|
||
|
|
'就让所有的苦水都注入我心中；',
|
||
|
|
'如果陆地注定要上升，',
|
||
|
|
'就让人类重新选择生存的峰顶。',
|
||
|
|
'新的转机和闪闪的星斗，',
|
||
|
|
'正在缀满没有遮拦的天空，',
|
||
|
|
'那是五千年的象形文字，',
|
||
|
|
'那是未来人们凝视的眼睛。',
|
||
|
|
'🗣'
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
start (offset) {
|
||
|
|
this.$message.success('到头部了')
|
||
|
|
},
|
||
|
|
end (offset) {
|
||
|
|
this.$message.success('到尾部了')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|