|
|
@@ -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;
|