徐总多门店
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.
 
 
 
 
 
 

139 lines
4.4 KiB

<!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>