优化页面切换动画/增加页面切换动画可配置/底部安全区适配/增加fastclick

Ljhhhhhh · Oct 28, 2019 · 5b0e122 · 5b0e122
1 parent f4249df
commit 5b0e122
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "axios": "^0.19.0",
     "core-js": "2.6.5",
     "dayjs": "^1.8.16",
+    "fastclick": "^1.0.6",
     "js-cookie": "^2.2.1",
     "lib-flexible": "^0.3.2",
     "vant": "^2.2.5",

diff --git a/public/index.html b/public/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
     <% if (process.env.NODE_ENV === 'production') { %> <% for(var css of
       htmlWebpackPlugin.options.cdn.css) { %>
       <link href="<%=css%>" rel="preload" as="style" />
@@ -13,11 +13,11 @@
       <link href="<%=js%>" rel="preload" as="script" />
       <script src="<%=js%>"></script>
       <% } %> <% } %>
-    <title>vue-cli-h5</title>
+    <title>H5Vue</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but vue-cli-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but H5Vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="app">
     <transition :name="transitionName">
-      <!-- <router-view class="router"></router-view> -->
       <keep-alive v-if="$route.meta.keepAlive">
         <router-view class="router"></router-view>
       </keep-alive>
@@ -10,18 +9,21 @@
   </div>
 </template>
 <script>
+import defaultSetting from './settings'
 export default {
   name: 'app',
   computed: {
     transitionName () {
-      return this.$store.state.direction
+      if (defaultSetting.needPageTrans) {
+        return this.$store.state.direction
+      }
+      return ''
     }
   }
 }
 </script>
 
 <style lang="scss">
-@import "style/common.scss";
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -31,10 +33,10 @@ export default {
   height: 100%;
   position: relative;
 }
+
 .router {
   width: 100%;
   height: 100%;
-  // height: 100vh;
   overflow: scroll;
   position: absolute;
   overflow: hidden !important;

diff --git a/src/main.js b/src/main.js
@@ -3,6 +3,7 @@ import 'lib-flexible'
 import App from './App.vue'
 import router from '@/router'
 import store from '@/store'
+import FastClick from 'fastclick'
 import 'utils/permission'
 import SvgIcon from 'components/SvgIcon'
 import '@/icons' // icon
@@ -23,6 +24,8 @@ if (process.env.NODE_ENV === 'production') {
   mockXHR()
 }
 
+FastClick.attach(document.body)
+
 // options 为可选参数，无则不传
 Vue.use(Lazyload)
 

diff --git a/src/settings.js b/src/settings.js
@@ -8,6 +8,7 @@ module.exports = {
    */
   fixedHeader: false,
   vconsole: true,
+  needPageTrans: true,
 
   /**
    * @type {boolean} true | false

diff --git a/src/style/common.scss b/src/style/common.scss
@@ -1,14 +1,16 @@
-html, body {
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    -webkit-overflow-scrolling:touch;
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .clearfix:after {
   display: block;
   clear: both;
-  content: "";
+  content: '';
   visibility: hidden;
   height: 0;
 }
@@ -20,56 +22,39 @@ textarea {
 }
 
 /* page change */
-$--transition-time: 350ms;
+$--transition-time: 300ms;
 .back-enter-active,
 .back-leave-active,
 .forward-enter-active,
 .forward-leave-active {
   will-change: transform;
-  transition: all $--transition-time;
+  transition: transform $--transition-time;
   position: absolute;
   height: 100%;
   backface-visibility: hidden;
   perspective: 1000;
 }
 .back-enter {
   opacity: 0.75;
-  transform: translate3d(-35%, 0, 0) !important;
+  transform: translate3d(-100%, 0, 0) !important;
 }
 .back-enter-active {
   z-index: -1 !important;
-  transition: all $--transition-time linear;
+  transition: transform $--transition-time;
 }
 .back-leave-active {
   transform: translate3d(100%, 0, 0) !important;
-  transition: all $--transition-time linear;
+  transition: transform $--transition-time;
 }
 .forward-enter {
   transform: translate3d(100%, 0, 0) !important;
 }
 .forward-enter-active {
-  transition: all $--transition-time linear;
+  transition: transform $--transition-time;
 }
 .forward-leave-active {
   z-index: -1;
   opacity: 0.65;
-  transform: translate3d(-35%, 0, 0) !important;
-  transition: all $--transition-time linear;
-}
-
-.slide-left-leave-active,
-.slide-right-leave-active,
-.slide-left-enter-active,
-.slide-right-enter-active {
-  transition: all $--transition-time;
-}
-.slide-left-enter,
-.slide-right-leave-active {
-  -webkit-transform: translate(100%, 0);
-  transform: translate(100%, 0);
-}
-.slide-left-leave-active,
-.slide-right-enter {
-  -webkit-transform: translate(-100%, 0);
-  transform: translate(-100%, 0);
+  transform: translate3d(-100%, 0, 0) !important;
+  transition: transform $--transition-time;
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -8,7 +8,6 @@
         </van-swipe-item>
       </van-swipe>
     </div>
-
     <div class="now-value">
       <span>当前数值{{$store.state.test.number}}</span>
       <div>
@@ -22,13 +21,18 @@
       </div>
     </div>
     <div class="icon-list">
-      <svg-icon v-for="icon in iconList" :key="icon" class="icon" :icon-class="icon" />
+      <svg-icon v-for="icon in iconList"
+                :key="icon"
+                class="icon"
+                :icon-class="icon" />
     </div>
     <div class="buttons">
-      <van-button type="warning" @click="logout">退出登录</van-button>
-      <router-link to="/404"><svg-icon icon-class="404"/>前往404页面</router-link>
+      <van-button type="warning"
+                  @click="logout">退出登录</van-button>
+      <router-link to="/404">
+        <svg-icon icon-class="404" />前往404页面</router-link>
     </div>
-    <footer-tabbar/>
+    <footer-tabbar />
   </div>
 </template>
 
@@ -116,20 +120,20 @@ export default {
 .icon-list {
   margin: 15px;
   font-size: 24px;
-  .icon{
+  .icon {
     margin: 0 10px;
   }
 }
-.buttons{
+.buttons {
   padding: 0 15px;
   font-size: 18px;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   justify-content: space-around;
   align-items: center;
-  a{
-    color: #333
+  a {
+    color: #333;
   }
 }
 </style>
diff --git a/yarn.lock b/yarn.lock
@@ -3695,6 +3695,11 @@ fast-levenshtein@~2.0.4:
   resolved "https://registry.npm.taobao.org/fast-levenshtein/download/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fastclick@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npm.taobao.org/fastclick/download/fastclick-1.0.6.tgz#161625b27b1a5806405936bda9a2c1926d06be6a"
+  integrity sha1-FhYlsnsaWAZAWTa9qaLBkm0Gvmo=
+
 fastparse@^1.1.1:
   version "1.1.2"
   resolved "https://registry.npm.taobao.org/fastparse/download/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"