-
Notifications
You must be signed in to change notification settings - Fork 0
/
retractableComponent.html
119 lines (115 loc) · 4 KB
/
retractableComponent.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>具有伸缩性的header</title>
<style type="text/css">
h1{ font-weight: 300; font-size: 1.8em; margin-top: 0;}
a{color: #fff;}
.draggable-header-view{position: relative; width: 320px; height: 560px; margin: 30px auto; overflow: hidden; background-color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.15); font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; color: #fff; font-weight: 300; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none;}
.draggable-header-view .bg{position: absolute; left: 0; top: 0; z-index: 0;}
.draggable-header-view .header,.draggable-header-view .content{position: relative; padding: 30px; z-index: 1; box-sizing: border-box;}
.draggable-header-view .header{ height: 160px; }
.draggable-header-view .content{ color: #333; line-height: 1.5em;}
</style>
<script src="src/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/dynamics.js/1.1.5/dynamics.min.js"></script>
<script type="text/x-template" id="headersDyna">
<div class="draggable-header-view"
@mousedown="startDrag" @touchstart="startDrag"
@mousemove="onDrag" @touchmove="onDrag"
@mouseup="stopDrag" @touchend="stopDrag"
@mouseleave="stopDrag">
<svg class="bg" width='320' height='560' >
<path :d="headerPath" fill='#3F51B5'></path>
</svg>
<div class="header">
<slot name="header"></slot>
</div>
<div class="content" :style="contentPosition">
<slot name="content"></slot>
</div>
</div>
</script>
</head>
<body>
<p>具有伸缩性的 Header Example,结合使用了Dynamics.js库</p>
<div id="main" @touchmove.prevent>
<headertemplate>
<template slot='header'>
<h1>Elastic Draggable SVG Header</h1>
<p>with <a href="https://cn.vuejs.org/v2/api/">vue.js</a> and <a href="http://dynamicsjs.com/">dynamics.js</a></p>
</template>
<template slot='content'>
<p>Note this is just an effect demo - there are of course many additional details if you want to use this in production, e.g. handling responsive sizes, reload threshold and content scrolling. Those are out of scope for this quick little hack. However, the idea is that you can hide them as internal details of a Vue.js component and expose a simple Web-Component-like interface. </p>
</template>
</headertemplate>
</div>
</body>
<script type="text/javascript">
Vue.component('headertemplate',{
template:'#headersDyna',
data:function(){
return {
dragging:false,
c:{x:160,y:160},// quadratic bezier control point
start:{x:0,y:0} // record drag start point
}
},
computed:{
headerPath:function(){
return "M0,0 L320,0 320,160"+"Q"+this.c.x+","+this.c.y+" 0,160"
},
contentPosition:function(){
var dy=this.c.y-160,
dampen=dy>0?2:4;
return {
transform:"translate3d(0,"+dy/dampen+"px,0)"
}
}
},
methods:{
startDrag:function(e){
e=e.changedTouches?e.changedTouches[0]: e;
this.dragging=true;
this.start.x=e.pageX;
this.start.y=e.pageY;
},
onDrag:function(e){
e=e.changedTouches?e.changedTouches[0]: e;
if(this.dragging){
this.c.x=160+(e.pageX-this.start.x);
var dy=e.pageY-this.start.y;
var dampen=dy>0?1.5:4;
this.c.y=160+dy/dampen;
}
},
stopDrag:function(){
if(this.dragging){
this.dragging=false;
dynamics.animate(this.c,{
x:160,
y:160
},{
type:dynamics.spring,
duration:700,
friction:180
})
}
}
}
})
var vm=new Vue({
el:'#main',
data:{
}
})
</script>
<!--
path:定义路径
d 对应的路径数据为 "M0,0 L320,0 320,160"+"Q"+this.c.x+","+this.c.y+" 0,160",其中:
命令M=moveto,L=lineto(移至),Q=quadratic Belzier curve(二次 Belzier 曲线)
整条数据路劲为:开始于位置0、0,移动到320、0,再到320、160的位置,然后到二次 Belzier曲线位置c.x、c.y,0、160
大写命令表示绝对定位,小写命令表示相对定位!
-->
</html>