Browse Source

feat: 完善电梯组件

zhenyulei 5 years ago
parent
commit
486b1013e9
2 changed files with 14 additions and 10 deletions
  1. 1 1
      src/packages/elevator/elevator.scss
  2. 13 9
      src/packages/elevator/elevator.vue

+ 1 - 1
src/packages/elevator/elevator.scss

@@ -1,6 +1,6 @@
 .nut-elevator {
   position: relative;
-  top: 40px;
+  // top: 40px;
   width: 100%;
 }
 .nut-main {

+ 13 - 9
src/packages/elevator/elevator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-elevator" :style="{ height: wrapHeight + 'px' }">
+  <div class="nut-elevator" :style="{ height: wrapHeight + 'px' }" v-if="dataArray.length>0">
     <div class="nut-main" :style="{ height: wrapHeight + 'px' }">
       <ul class="nut-elevator-ul" id="nut-elevator-ul">
         <li v-for="item in dataArray" v-bind:key="item.title" class="nut-list-title">
@@ -82,14 +82,23 @@ export default {
       currBox: false
     };
   },
+  watch:{
+    dataArray(val){
+      if(val.length>0){
+        this.$nextTick(()=>{
+            this.initPage();
+        })
+      }
+    }
+  },
   mounted() {
-    this.initPage();
+    if(this.dataArray.length>0 ){
+      this.initPage();
+    }   
   },
   methods: {
     initPage() {
-      let fontSize = this.getFontSize();
       let innerHeight = document.documentElement.clientHeight;
-      //this.wrapHeight = (innerHeight/fontSize-1);
       this.wrapHeight = innerHeight - this.otherHeight;
       let initIndex = this.dataArray[this.initIndex].title;
       document.getElementById(initIndex).scrollIntoView();
@@ -122,13 +131,11 @@ export default {
       titleBox.scrollIntoView();
     },
     onPointerEnd(e) {
-      let fontSize = this.getFontSize();
       let dataArrayLength = this.dataArray.length;
       let navHeight = document.getElementById('nut-elevator-nav').clientHeight;
       let navTop = document.getElementById('nut-elevator-nav').offsetTop;
       let navOffsetTop = navTop - navHeight / 2; //nav距离顶部的距离
       let eTop = e.type.indexOf('touch') !== -1 ? e.changedTouches[0].clientY : e.clientY;
-      //let navIndex =parseInt((eTop - navOffsetTop)/this.navHeight/fontSize);
       let navIndex = parseInt((eTop - navOffsetTop) / this.navHeight);
       setTimeout(() => {
         this.currBox = false;
@@ -139,15 +146,12 @@ export default {
     },
     onPointerMove(e) {
       e.preventDefault();
-      let fontSize = this.getFontSize();
       let dataArrayLength = this.dataArray.length;
       let navHeight = document.getElementById('nut-elevator-nav').clientHeight;
       let navTop = document.getElementById('nut-elevator-nav').offsetTop;
       let navOffsetTop = navTop - navHeight / 2; //nav距离顶部的距离
       let eTop = e.type.indexOf('touch') !== -1 ? e.touches[0].clientY : e.clientY;
-      //let navIndex =parseInt((eTop - navOffsetTop)/this.navHeight/fontSize);
       let navIndex = parseInt((eTop - navOffsetTop) / this.navHeight);
-
       if (navIndex < dataArrayLength && navIndex >= 0) {
         this.moveFun(this.dataArray[navIndex].title, navIndex);
         this.currBox = true;