修改移动端样式,底部tabbar适配iPhoneXms

package.json

@@ -33,6 +33,7 @@
     "vue": "2.6.10",
     "vue-router": "3.0.6",
     "vue-simple-uploader": "^0.7.4",
+    "vue-touch": "^2.0.0-beta.4",
     "vuex": "3.1.0",
     "we-vue": "^2.3.3",
     "webuploader": "^0.1.8",

public/index.html

@@ -4,6 +4,10 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+     <!--在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
+
     <link rel="icon" href="<%= BASE_URL %>netdisk.png">
     <title><%= webpackConfig.name %></title>
   </head>

src/icons/svg/add-file.svg

@@ -0,0 +1 @@
+<svg t="1582089551409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31635" width="32" height="32"><path d="M820.965517 247.172414L573.793103 0H26.482759v1024h794.482758V247.172414" fill="#EFECDE" p-id="31636"></path><path d="M203.034483 406.068966h441.37931a17.655172 17.655172 0 1 0 0-35.310345H203.034483a17.655172 17.655172 0 0 0 0 35.310345M203.034483 264.827586h176.551724a17.655172 17.655172 0 1 0 0-35.310345H203.034483a17.655172 17.655172 0 0 0 0 35.310345M644.413793 512H203.034483a17.655172 17.655172 0 1 0 0 35.310345h441.37931a17.655172 17.655172 0 1 0 0-35.310345M644.413793 653.241379H203.034483a17.655172 17.655172 0 0 0 0 35.310345h441.37931a17.655172 17.655172 0 1 0 0-35.310345M644.413793 794.482759H203.034483a17.655172 17.655172 0 0 0 0 35.310344h441.37931a17.655172 17.655172 0 1 0 0-35.310344M573.793103 0v247.172414h247.172414L573.793103 0" fill="#D5D0BB" p-id="31637"></path><path d="M997.517241 812.137931c0 117.000828-94.861241 211.862069-211.862069 211.862069s-211.862069-94.861241-211.862069-211.862069 94.861241-211.862069 211.862069-211.862069 211.862069 94.861241 211.862069 211.862069" fill="#71C386" p-id="31638"></path><path d="M891.586207 794.482759h-88.275862v-88.275862a17.655172 17.655172 0 0 0-35.310345 0v88.275862h-88.275862a17.655172 17.655172 0 0 0 0 35.310344h88.275862v88.275863a17.655172 17.655172 0 0 0 35.310345 0v-88.275863h88.275862a17.655172 17.655172 0 0 0 0-35.310344" fill="#FFFFFF" p-id="31639"></path></svg>

src/icons/svg/tab-favorite.svg

@@ -0,0 +1 @@
+<svg t="1582090769486" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="581" width="32" height="32"><path d="M532.37 129.31L643.1 353.67a22.602 22.602 0 0 0 17.02 12.36l247.6 35.98c18.54 2.69 25.94 25.48 12.53 38.55L741.08 615.21a22.575 22.575 0 0 0-6.5 20l42.3 246.6c3.17 18.46-16.21 32.54-32.79 23.83L522.62 789.22a22.601 22.601 0 0 0-21.03 0L280.12 905.65c-16.58 8.72-35.96-5.36-32.79-23.83l42.3-246.6a22.575 22.575 0 0 0-6.5-20L103.95 440.57c-13.41-13.08-6.01-35.86 12.53-38.55l247.6-35.98a22.602 22.602 0 0 0 17.02-12.36l110.73-224.37c8.29-16.8 32.25-16.8 40.54 0z" fill="#FFA823" p-id="582"></path><path d="M754.65 940.3c-8.68 0-17.4-2.09-25.46-6.33L512.1 819.84 295.01 933.97c-18.53 9.74-40.56 8.15-57.5-4.16-16.94-12.31-25.26-32.77-21.72-53.4l41.46-241.73-175.63-171.2c-14.99-14.61-20.29-36.06-13.82-55.97 6.47-19.91 23.36-34.15 44.08-37.16l242.71-35.27 108.54-219.94c9.26-18.77 28.03-30.44 48.96-30.44 20.94 0 39.7 11.66 48.96 30.44L669.6 335.08l242.71 35.27c20.72 3.01 37.61 17.25 44.08 37.16 6.47 19.91 1.18 41.36-13.82 55.97l-175.63 171.2 41.46 241.73c3.54 20.63-4.78 41.1-21.72 53.4-9.56 6.96-20.76 10.49-32.03 10.49zM139.93 430.94L305.46 592.3a54.59 54.59 0 0 1 15.7 48.33l-39.08 227.83 204.61-107.57a54.595 54.595 0 0 1 50.82 0l204.61 107.57-39.08-227.83a54.59 54.59 0 0 1 15.7-48.33l165.53-161.35-228.76-33.25a54.564 54.564 0 0 1-41.11-29.87L512.1 160.55 409.8 367.84a54.564 54.564 0 0 1-41.11 29.87l-228.76 33.23z m363.74-287.47z" fill="#FFA823" p-id="583"></path></svg>

src/icons/svg/tab-folder.svg

@@ -0,0 +1 @@
+<svg t="1582090882296" class="icon" viewBox="0 0 1365 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1680" width="32" height="32"><path d="M85.333333 362.666667h1169.066667v512c0 46.933333-38.4 85.333333-85.333333 85.333333H170.666667c-46.933333 0-85.333333-38.4-85.333334-85.333333v-512zM85.333333 157.866667v93.866666h597.333334l-226.133334-140.8c-38.4-25.6-110.933333-46.933333-157.866666-46.933333h-170.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667v51.2z" fill="#FFB927" p-id="1681"></path><path d="M85.333333 213.333333h1126.4c25.6 0 42.666667 21.333333 42.666667 42.666667v68.266667H85.333333V213.333333z" fill="#FFB927" p-id="1682"></path></svg>

src/icons/svg/tab-recently.svg

@@ -0,0 +1 @@
+<svg t="1582091405096" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2521" width="32" height="32"><path d="M513.5 899C726.406 899 899 726.406 899 513.5S726.406 128 513.5 128 128 300.594 128 513.5 300.594 899 513.5 899z m0 64C265.248 963 64 761.752 64 513.5S265.248 64 513.5 64 963 265.248 963 513.5 761.752 963 513.5 963z" fill="#2c2c2c" p-id="2522"></path><path d="M800 482c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H545c-35.346 0-64-28.654-64-64V226c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32v256h255z" fill="#2c2c2c" p-id="2523"></path></svg>

src/icons/svg/tab-setting.svg

@@ -0,0 +1 @@
+<svg t="1582090862780" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1547" width="32" height="32"><path d="M932.59 438.66l-88.55-9.42c-11.15-1.18-20.89-8.42-24.71-18.96-5.51-15.23-12.13-30.02-19.38-44.93-5.06-10.39-3.46-22.81 3.87-31.75l56.85-69.42c9.75-11.89 8.88-29.23-1.99-40.1l-59.84-59.84c-10.88-10.89-28.26-11.73-40.15-1.95l-69.01 56.78c-8.91 7.33-21.31 8.97-31.7 3.96-15.15-7.29-30.06-13.94-45.36-19.48-10.53-3.82-17.77-13.5-18.97-24.65-2.46-23.2-6.65-62.51-9.44-88.7-1.62-15.21-14.44-26.65-29.73-26.65h-86.33c-15.29 0-28.12 11.54-29.74 26.74l-9.4 88.32c-1.19 11.24-8.54 21.08-19.22 24.81-15.66 5.48-30.74 12.06-45.31 19.28-10.39 5.15-22.85 3.52-31.82-3.83l-69.09-56.58c-11.93-9.78-29.34-8.87-40.19 2.09l-59.17 59.75c-10.75 10.86-11.59 28.08-1.94 39.93l56.68 69.59c7.23 8.89 8.87 21.19 3.9 31.51-7.17 14.91-13.61 29.7-19.04 44.92-3.8 10.62-13.57 17.95-24.78 19.14l-88.95 9.43c-15.21 1.61-26.75 14.44-26.75 29.74v86.4c0 15.26 11.48 28.07 26.64 29.73l88.83 9.73c11.3 1.24 21.12 8.71 24.81 19.47 5.23 15.3 11.58 30.35 18.82 44.88 5.14 10.33 3.49 22.76-3.8 31.71l-56.28 69.1c-9.68 11.89-8.8 29.18 2.05 40.03l59.03 59.03c10.85 10.85 28.14 11.73 40.04 2.04l69.1-56.29c8.94-7.28 21.34-8.94 31.66-3.82a402.467 402.467 0 0 0 45.46 19.14c10.71 3.75 18.11 13.56 19.32 24.85l9.41 88.41c1.62 15.21 14.45 26.74 29.74 26.74h86.33c15.29 0 28.13-11.54 29.74-26.74l9.42-88.47c1.19-11.22 8.53-21 19.16-24.79 15.34-5.46 30.35-11.95 45.39-19.31 10.35-5.07 22.75-3.41 31.67 3.89l68.93 56.4c11.86 9.69 29.1 8.88 39.99-1.89l59.71-59.13c10.96-10.86 11.87-28.26 2.09-40.2l-56.6-69.11c-7.33-8.95-8.97-21.39-3.85-31.77 7.19-14.58 13.75-29.67 19.22-45.02 3.77-10.58 13.51-17.88 24.67-19.1l88.66-9.75c15.17-1.67 26.64-14.47 26.64-29.72V468.4c0-15.29-11.54-28.12-26.74-29.74zM604.75 604.5c-25.25 25.26-55.76 37.65-92.45 37.65s-67.32-12.27-92.45-37.65c-25.39-25.62-37.66-56.71-37.66-92.94 0-36.7 12.39-67.2 37.66-92.46 25.25-25.26 55.76-37.65 92.45-37.65s67.2 12.39 92.45 37.65c25.27 25.26 37.66 55.76 37.66 92.46s-12.4 67.68-37.66 92.94z" fill="#6F94D4" p-id="1548"></path></svg>

src/layout/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar">
+  <div v-if="isShow" class="navbar">
     <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
     <breadcrumb class="breadcrumb-container" />
@@ -37,6 +37,18 @@ import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 
 export default {
+  data() {
+    return {
+      isShow: true
+    }
+  },
+  mounted() {
+    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
+      this.isShow = false
+    } else {
+      this.isShow = true
+    }
+  },
   components: {
     Breadcrumb,
     Hamburger

src/main.js

@@ -14,11 +14,15 @@ import store from './store'
 import router from './router'
 // import WeVue from 'we-vue'
 // import 'we-vue/lib/style.css'
-import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky } from 'vant';
+import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem} from 'vant';
 
 import '@/icons' // icon
 import '@/permission' // permission control
 
+import VueTouch from"vue-touch";
+
+Vue.use(VueTouch, {name:'v-touch'})
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -50,6 +54,10 @@ Vue.use(Col);
 Vue.use(Row);
 Vue.use(Divider);
 Vue.use(Sticky);
+Vue.use(NavBar);
+Vue.use(Icon);
+Vue.use(Tabbar);
+Vue.use(TabbarItem);
 
 Vue.use(uploader)
 Vue.use(EVueContextmenu)
@@ -66,7 +74,7 @@ new Vue({
 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
   Vue.prototype.$pc = false
 } else {
-  Vue.prototype.$pc = true
+  Vue.prototype.$pc = false
   let winWidth = document.documentElement.offsetWidth ||
     document.body.offsetWidth
   winWidth = winWidth < 1366 ? 1366 : winWidth

src/views/home/mobile/index.vue

@@ -6,6 +6,7 @@
       :finished="finished"
       :finished-text="statistics()"
       @load="getFileList(true)"
+      @scroll="swipeUp"
     >
       <!-- <van-sticky :offset-top="0">
         <van-row class="classification">
@@ -28,17 +29,52 @@
         </van-row>
       </van-sticky> -->
 
+      <!--<van-nav-bar-->
+        <!--v-if="pathList.length < 3"-->
+        <!--:title="pathList[pathList.length-2].folder"-->
+        <!--:left-text=""-->
+        <!--right-text="选择"-->
+        <!--left-arrow>-->
+      <!--</van-nav-bar>-->
+
+      <van-sticky :offset-top="0">
+        <div>{{test}} {{diffTabbarTop}} {{lastTabbarOffsetTop}}</div>
+        <van-nav-bar
+          v-if="pathList.length < 3"
+          title="浏览"
+          right-arrow
+          @click-right="titleRightClick">
+          <!--<van-icon name="wap-nav" slot="right">-->
+          <!--</van-icon>-->
+          <svg-icon class="title-right-icon" icon-class="add-file" slot="right"/>
+        </van-nav-bar>
+
+        <van-nav-bar
+          v-if="pathList.length === 3"
+          :title="pathList[pathList.length-2].folder"
+          left-text="所有文件"
+          right-text="选择"
+          left-arrow
+          @click-left="clickBack">
+        </van-nav-bar>
+
+        <van-nav-bar
+          v-if="pathList.length > 3"
+          :title="pathList[pathList.length-2].folder"
+          :left-text="pathList[pathList.length-3].folder"
+          right-text="选择"
+          left-arrow
+          @click-left="clickBack">
+        </van-nav-bar>
+
+      </van-sticky>
+
       <!--<van-cell v-for="item in fileList" :key="item.id" :title="item.name"></van-cell>-->
       <!--<van-cell v-for="item in fileList" :key="item.id" :title="item.name" :label="item.updateDate"></van-cell>-->
-      <van-cell class="list-item" v-for="(item,index) in fileList" :key="item.id">
+      <van-cell class="list-item" center v-for="(item,index) in fileList" :key="item.id" @click="fileClick(item)" :is-link="item.isFolder">
-
+          <!--<van-divider v-if="index === 0" style="margin: 0 15px 0 15px;"></van-divider>-->
-        <template slot="left">
+          <van-row>
-          <van-button square type="primary" text="选择"></van-button>
+            <van-col span="4" align="center" class="list-cell-icon">
-        </template>
-
-        <!--<van-divider v-if="index === 0" style="margin: 0 15px 0 15px;"></van-divider>-->
-        <van-row>
-          <van-col span="4" align="center" class="list-cell-icon">
               <svg-icon v-if="item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />
               <svg-icon v-if="item.isFolder" icon-class="folder" />
               <svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />
@@ -50,32 +86,68 @@
               <svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel" />
               <svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />
               <svg-icon v-else icon-class="file" />
-          </van-col>
-          <van-col span="16" @click="fileClick(item)">
-            <van-col span="16">
-              {{item.name}}
             </van-col>
-            <van-col span="16" class="file-description" justify="space-between">
+            <van-col span="16" class="list-item-content">
-              <van-col span="12">
+              <van-col span="24">
-                {{formatTime(item.agoTime)}}&nbsp;&nbsp;&nbsp;{{formatSize(item.size)}}
+                {{item.name}}
+              </van-col>
+              <van-col span="24" class="file-description" justify="space-between">
+                <van-col span="24">
+                  {{formatTime(item.agoTime)}}&nbsp;&nbsp;&nbsp;{{formatSize(item.size)}}
+                </van-col>
+                <!-- <van-col span="8">
+                  {{formatSize(item.size)}}
+                </van-col> -->
               </van-col>
-              <!-- <van-col span="8">
-                {{formatSize(item.size)}}
-              </van-col> -->
             </van-col>
-          </van-col>
+            <van-col span="4"></van-col>
-          <van-col span="4"></van-col>
+          </van-row>
-        </van-row>
+          <!--<van-divider></van-divider>-->
-
-        <template slot="right">
-          <van-button square type="primary" text="收藏"></van-button>
-          <van-button square type="danger" text="删除"></van-button>
-        </template>
-
-        <!--<van-divider></van-divider>-->
       </van-cell>
     </van-list>
   </van-pull-refresh>
+    <!--<van-tabbar v-model="tabActive" :class="tabBottom">-->
+    <div v-if="diffTabbarTop === 0 || diffTabbarTop > 0">
+      <van-tabbar
+        id="tabbar"
+        active-color="#07c160"
+        inactive-color="#000"
+        v-model="tabActive"
+        class="tab-bottom">
+        <van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>
+      </van-tabbar>
+    </div>
+    <div v-if="diffTabbarTop < 0">
+      <van-tabbar
+        id="tabbar"
+        v-if="isiPhoneX === 30"
+        active-color="#07c160"
+        inactive-color="#000"
+        v-model="tabActive"
+        class="tab-bottom-iphoneX">
+        <van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>
+      </van-tabbar>
+
+      <van-tabbar
+        id="tabbar"
+        v-if="isiPhoneX === 35"
+        active-color="#07c160"
+        inactive-color="#000"
+        v-model="tabActive"
+        class="tab-bottom-iphoneXS">
+        <van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>
+      </van-tabbar>
+    </div>
+
   </div>
 </template>
 <script>
@@ -90,6 +162,10 @@
   import 'vant/lib/row/style';
   import 'vant/lib/divider/style';
   import 'vant/lib/sticky/style';
+  import 'vant/lib/nav-bar/style';
+  import 'vant/lib/icon/style';
+  import 'vant/lib/tabbar/style';
+  import 'vant/lib/tabbar-item/style';
 
   import { getPath, getPathList, setPath, removePath } from '@/utils/path'
   import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
@@ -98,15 +174,19 @@
   export default {
     data() {
       return {
+        test: 0,
+        lastTabbarOffsetTop: 0,// 底部tabbar与上边框 上次的距离
+        diffTabbarTop: 0,// 底部tabbar与上边框的变化距离
+        isiPhoneX: 0,
+        tabActive: 0,
         path: this.$route.query.path,
         fileList: [],
-        totalSize: 0,
         pathList: [
           { 'folder': '', index: 0 },
           { 'folder': '+', index: 1 }
         ],
         pagination: {
-          pageIndex: 1,
+          pageIndex: 0,
           pageSize: 25,
           total: 0,
         },
@@ -116,10 +196,64 @@
       };
     },
     mounted(){
+
+      var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+      if (isIOS) {
+        if(screen.height === 812 && screen.width === 375){
+          // iPhone X iPhone XS
+          this.isiPhoneX = 30
+        }else if (screen.height === 896 && screen.width === 414){
+          // iPhone XS Max   iPhone XR
+          this.isiPhoneX = 35
+        }
+      }
+
       if (window.history && window.history.pushState) {
         history.pushState(null, null, document.URL);
         window.addEventListener('popstate', this.goBack, false);
       }
+
+      // 加载路径
+      const pathList = getPathList()
+      if (pathList && pathList !== 'undefined') {
+        const res = JSON.parse(pathList)
+        const list = []
+        res.forEach(function(element) {
+          const item0 = {}
+          item0['folder'] = element.folder + ''
+          item0['index'] = element.index
+          list.push(item0)
+        })
+        this.pathList = list
+      }
+
+      const that = this
+      // 判断底部tabbar与上边框的距离,用来适配iPhoneX机型下面多出来的部分
+      window.addEventListener('scroll', () => {
+        that.test = 14
+        var tabbar= document.getElementById("tabbar");
+        if(tabbar.offsetTop){
+
+        }
+        const top = tabbar.offsetTop
+        that.test = tabbar.offsetTop
+        if(that.lastTabbarOffsetTop === 0){
+          if(top > 0){
+            that.lastTabbarOffsetTop = top
+          }
+        }else{
+          const diff = that.lastTabbarOffsetTop - top
+          if(diff > 0){
+            console.log("显示")
+            that.diffTabbarTop = diff
+          } else if(diff < 0){
+            console.log("隐藏")
+            that.diffTabbarTop = diff
+          }
+          that.lastTabbarOffsetTop = top
+        }
+      }, true);
+
     },
     destroyed(){
       window.removeEventListener('popstate', this.goBack, false);
@@ -127,14 +261,61 @@
     methods: {
       // 浏览器的返回事件
       goBack(){
-        if (this.$route.query.path){
+        // let linkIndex = 0
-          this.path = this.$route.query.path
+        // if (this.$route.query.path){
-          console.log('goBack path', this.path)
+        //   this.path = this.$route.query.path
-        } else {
+        //   linkIndex = this.pathList.length - 3;
-          this.path = ''
+        // } else {
+        //   this.path = ''
+        //   this.$router.push(`/_m`)
+        // }
+        // this.pathList.splice(this.pathList.findIndex(v => v.index === linkIndex + 2), this.pathList.length - (linkIndex + 2))
+        // setPath(this.path, this.pathList)
+        // this.getFileList()
+        const linkIndex = this.pathList.length-3
+        this.handleLink(this.pathList[linkIndex],linkIndex)
+      },
+      // 点击返回按钮(标题)
+      clickBack() {
+        const linkIndex = this.pathList.length-3
+        this.handleLink(this.pathList[linkIndex], linkIndex, true)
+      },
+      // 点击右边按钮(标题)
+      titleRightClick() {
+        console.log('titleRightClick')
+      },
+      handleLink(item, index, isPushLink) {
+
+        console.log("handleLink", item)
+        console.log("handleLink - index", index)
+
+        if (!this.$route.query.path){
           this.$router.push(`/_m`)
         }
-        this.getFileList()
+
+        if(item.search){
+          if(item.searchKey){
+            this.searchFileByKeyWord(item.searchKey)
+          } else if(item.row){
+            this.searchFileAndOpenDir(item.row)
+          }
+          this.pathList.splice(this.pathList.findIndex(v => v.index === index + 2), this.pathList.length - (index + 2))
+        } else {
+          this.pathList.splice(this.pathList.findIndex(v => v.index === index + 2), this.pathList.length - (index + 2))
+          this.pathList.forEach((p, number) => {
+            if (number === 0) {
+              this.path = ''
+            } else if (number === this.pathList.length - 1) {
+            } else {
+              this.path += '/' + this.pathList[number].folder
+            }
+          })
+          setPath(this.path, this.pathList)
+          if(isPushLink){
+            this.$router.push(`/_m?path=${this.path}`)
+          }
+          this.getFileList()
+        }
       },
       // 格式化最近时间
       formatTime(time) {
@@ -154,7 +335,12 @@
         this.getFileList();
       },
       getFileList(onLoad) {
-        console.log('onLoad', onLoad)
+        if (onLoad) {
+          this.pagination.pageIndex++
+        } else {
+          this.pagination.pageIndex = 1
+        }
+        this.finished = false;
         api.fileList({
           userId: this.$store.state.user.userId,
           currentDirectory: this.$route.query.path,
@@ -163,7 +349,6 @@
         }).then(res => {
           if(onLoad){
             res.data.forEach(file => {
-              this.totalSize += file.size
               this.fileList.push(file)
             });
           }else{
@@ -180,7 +365,11 @@
       },
       // 统计
       statistics() {
-        return this.getShowSumFileAndFolder() + ' ' + this.getShowSumSize(this.totalSize)
+        let totalSize = 0
+        this.fileList.forEach(file => {
+          totalSize += file.size;
+        })
+        return this.getShowSumFileAndFolder() + ' ' + this.getShowSumSize(totalSize)
       },
       // 统计文件和文件夹
       getShowSumFileAndFolder() {
@@ -209,7 +398,9 @@
         if (totalSize > 0) {
           sizeSum = '  共'
         }
-        if (totalSize < 1024) {
+        if (totalSize === 0) {
+          return sizeSum
+        } else if (totalSize < 1024) {
           sizeSum += totalSize + 'B'
         } else if (totalSize >= 1024 && totalSize < 1024 * 1024) {
           sizeSum += (totalSize / 1024).toFixed(2) + 'K'
@@ -238,9 +429,10 @@
           item2['index'] = this.pathList.length
           this.pathList[this.pathList.length - 1] = item1
           this.pathList.push(item2)
-          console.log('push path',this.path)
+          console.log('path',this.path)
+          console.log('pathList',this.pathList)
           this.$router.push(`/_m?path=${this.path}`)
-          // window.open(process.env.VUE_APP_BASE_API + '/m?path=' + this.path, '_self')
+          setPath(this.path, this.pathList)
           this.getFileList()
         } else {
           // 打开文件
@@ -248,11 +440,47 @@
           const url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
           window.open(url, '_blank')
         }
+      },
+      swipeUp() {
+        this.test = 10
+        console.log(67)
+      },
+      tabBottom() {
+        return { padding: '0 0 20px 0' }
       }
     }
   }
 </script>
 <style lang="scss" scoped>
+
+  .tab-bottom {
+    padding: 0 0 25px 0;
+  }
+
+  .tab-bottom-iphoneX {
+    padding: 0 0 25px 0;
+    .van-tabbar-item {
+      margin-top: -5px;
+    }
+  }
+
+  .tab-bottom-iphoneXS {
+    padding: 0 0 25px 0;
+    .van-tabbar-item {
+      margin-top: -5px;
+    }
+  }
+
+  .van-tabbar-item {
+    color: #646566;
+    text-align: center;
+    margin-top: 20px;
+    font-size: 10px;
+    .tab-text {
+      margin-top: 2px;
+    }
+  }
+
   .container {
     font-size: 14px;
 
@@ -278,14 +506,57 @@
     white-space: nowrap;
     text-overflow:ellipsis;
   }
+
   .list-item {
-    padding: 5px 0;
+    padding: 5px 10px;
-    height: 3.5rem;
 
     .list-cell-icon {
-      margin-top: 7px;
+      font-size: 18px;
-      height: 3.5rem;
+    }
-      line-height: 3.5rem;
+
+    .list-item-content {
+      margin-left: 5px;
     }
   }
+
+  .list-item:active {
+    background-color: #bfcbd930;
+  }
+
+  .van-nav-bar__title {
+    max-width: 30%;
+  }
+
+  .van-nav-bar__left {
+     max-width: 30%;
+   }
+  /*.van-nav-bar__left {*/
+     /*left: 0;*/
+  /*}*/
+
+  .van-icon.van-icon-arrow-left.van-nav-bar__arrow {
+    left: 5px;
+  }
+
+  .van-nav-bar__left {
+    left: 0;
+    .van-nav-bar__text {
+      padding: 0 0 0 25px;
+    }
+  }
+
+  .van-nav-bar__arrow+.van-nav-bar__text {
+    max-width: 7.5rem;
+    min-width: 5.5rem;
+    text-align: left;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+  }
+
+  .title-right-icon {
+    width: 2rem;
+    height: 2rem;
+    vertical-align: middle;
+  }
 </style>