updated example

jaweii · Jun 17, 2017 · 76d7745 · 76d7745
1 parent 699a703
commit 76d7745
Show file tree

Hide file tree

Showing 18 changed files with 80 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -104,7 +104,7 @@ options还可以在每个组件的data中配置，举例：
     }
 
 
-一些注意点：  
+其他：  
 1、基于vue v2.3.4版本和webkit内核浏览器开发、调试；  
 2、非新项目使用这个插件后，因为css问题，可能造成原本元素在转场动画时有些地方排版错乱，那就需要调整css；  
 3、每个路由匹配的组件模板高度最好大于等于屏幕高度，否则转场不好看，可以为`<router-view>`  添加class，设置`min-height:100%;`  

diff --git a/example/dist/index.html b/example/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>learn</title><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><link href=./static/css/app.191cafd4e16622688081db28eae6ffc1.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.a5d43a276030b9e2a77c.js></script><script type=text/javascript src=./static/js/vendor.475357f79d7857818115.js></script><script type=text/javascript src=./static/js/app.01f769f51ff782d778fc.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><title>learn</title><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><link href=./static/css/app.ccb5d2e6b90cea54e5f2c9a33ab6c0bb.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.96c4ef6c6bc9ebe7394b.js></script><script type=text/javascript src=./static/js/vendor.61667777a62e492c952d.js></script><script type=text/javascript src=./static/js/app.b23cc8a0263c423d99ce.js></script></body></html>
diff --git a/example/dist/static/css/app.191cafd4e16622688081db28eae6ffc1.css b/example/dist/static/css/app.191cafd4e16622688081db28eae6ffc1.css
diff --git a/example/dist/static/css/app.191cafd4e16622688081db28eae6ffc1.css.map b/example/dist/static/css/app.191cafd4e16622688081db28eae6ffc1.css.map
diff --git a/example/dist/static/css/app.ccb5d2e6b90cea54e5f2c9a33ab6c0bb.css b/example/dist/static/css/app.ccb5d2e6b90cea54e5f2c9a33ab6c0bb.css
diff --git a/example/dist/static/css/app.ccb5d2e6b90cea54e5f2c9a33ab6c0bb.css.map b/example/dist/static/css/app.ccb5d2e6b90cea54e5f2c9a33ab6c0bb.css.map
diff --git a/example/dist/static/js/app.01f769f51ff782d778fc.js b/example/dist/static/js/app.01f769f51ff782d778fc.js
diff --git a/example/dist/static/js/app.01f769f51ff782d778fc.js.map b/example/dist/static/js/app.01f769f51ff782d778fc.js.map
diff --git a/example/dist/static/js/app.b23cc8a0263c423d99ce.js b/example/dist/static/js/app.b23cc8a0263c423d99ce.js
diff --git a/example/dist/static/js/app.b23cc8a0263c423d99ce.js.map b/example/dist/static/js/app.b23cc8a0263c423d99ce.js.map
diff --git a/...tatic/js/manifest.a5d43a276030b9e2a77c.js → ...tatic/js/manifest.96c4ef6c6bc9ebe7394b.js b/...tatic/js/manifest.a5d43a276030b9e2a77c.js → ...tatic/js/manifest.96c4ef6c6bc9ebe7394b.js
diff --git a/...c/js/manifest.a5d43a276030b9e2a77c.js.map → ...c/js/manifest.96c4ef6c6bc9ebe7394b.js.map b/...c/js/manifest.a5d43a276030b9e2a77c.js.map → ...c/js/manifest.96c4ef6c6bc9ebe7394b.js.map
diff --git a/.../static/js/vendor.475357f79d7857818115.js → .../static/js/vendor.61667777a62e492c952d.js b/.../static/js/vendor.475357f79d7857818115.js → .../static/js/vendor.61667777a62e492c952d.js
diff --git a/...tic/js/vendor.475357f79d7857818115.js.map → ...tic/js/vendor.61667777a62e492c952d.js.map b/...tic/js/vendor.475357f79d7857818115.js.map → ...tic/js/vendor.61667777a62e492c952d.js.map
diff --git a/example/src/components/Hello.vue b/example/src/components/Hello.vue
@@ -6,6 +6,21 @@
             <li><a @click="$router.push('page-1')">底部打开</a></li>
             <li><a @click="$router.push('page-2')">默认转场效果</a></li>
             <li><a @click="$router.push('page-3')">bounce转场</a></li>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <li><a @click="$router.push('page-4')">touch点转场</a></li>
+            <li><a @click="$router.push('page-4')">touch点转场</a></li>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <li><a @click="$router.push('page-4')">touch点转场</a></li>
+            <li><a @click="$router.push('page-4')">touch点转场</a></li>
         </ul>
         <button @click="$router.push('page-1')" class="publish">+</button>
     </div>
@@ -15,8 +30,7 @@ export default {
     name: 'hello',
     data() {
         return {
-            vuegConfig
-: {
+            vuegConfig: {
                 forwardAnim: this.$store.state.page3.forwardAnim,
                 backAnim: this.$store.state.page3.backAnim,
                 duration: this.$store.state.page3.duration
@@ -49,18 +63,20 @@ h2 {
     font-weight: normal;
     margin: 0;
     padding-top: 50px;
-    color:#4c2c2d;
+    color: #4c2c2d;
 }
 
 ul {
     list-style-type: none;
     padding: 0;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 li {
     text-align: center;
     display: inline-block;
-    margin: 0 10px;
+    margin: 10px;
 }
 
 a {

diff --git a/example/src/components/page4.vue b/example/src/components/page4.vue
@@ -0,0 +1,40 @@
+<template>
+    <section>
+        <img src="../assets/logo.png">
+        <h1>页面4 定点载入</h1>
+        <br>
+        <router-view v-transition></router-view>
+        <br>
+        <a @click="back">返回</a>
+        <br>
+    </section>
+</template>
+<script>
+export default {
+    name: 'page1',
+    data() {
+        return {
+            vuegConfig: {
+                forwardAnim: 'touchPoint',
+                duration: '.3'
+            }
+        }
+    },
+    methods: {
+        back() {
+            this.$router.back()
+        }
+    }
+}
+</script>
+<style scoped>
+section {
+    text-align: center;
+    background-color: #f0f4c3;
+    height: 800px;
+}
+
+h1 {
+    margin: 0;
+}
+</style>
diff --git a/example/src/router/index.js b/example/src/router/index.js
@@ -4,6 +4,7 @@ import Hello from '@/components/Hello'
 import page1 from '@/components/page1'
 import page2 from '@/components/page2'
 import page3 from '@/components/page3'
+import page4 from '@/components/page4'
 import page20 from '@/components/page20'
 import page21 from '@/components/page21'
 
@@ -38,5 +39,9 @@ export default new Router({
         path: '/page-3',
         name: 'page3',
         component: page3
+    }, {
+        path: '/page-4',
+        name: 'page4',
+        component: page4
     }]
 })
diff --git a/package.json b/package.json
@@ -84,5 +84,5 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "version": "1.2.3"
+  "version": "1.2.4"
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head><meta charset=utf-8><title>learn</title><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><link href=./static/css/app.191cafd4e16622688081db28eae6ffc1.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.a5d43a276030b9e2a77c.js></script><script type=text/javascript src=./static/js/vendor.475357f79d7857818115.js></script><script type=text/javascript src=./static/js/app.01f769f51ff782d778fc.js></script></body></html>
		<!DOCTYPE html><html><head><meta charset=utf-8><title>learn</title><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><link href=./static/css/app.ccb5d2e6b90cea54e5f2c9a33ab6c0bb.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.96c4ef6c6bc9ebe7394b.js></script><script type=text/javascript src=./static/js/vendor.61667777a62e492c952d.js></script><script type=text/javascript src=./static/js/app.b23cc8a0263c423d99ce.js></script></body></html>