|
@@ -10,18 +10,19 @@
|
|
|
<!-- <img v-show='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/images/iconBlackTop.png' alt />
|
|
|
<img class='disabled' v-show='parseInt(marginTop) === 0' src='@/assets/images/iconLightTop.png' alt /> -->
|
|
|
</div>
|
|
|
- <div class='floor-out' :style='{ height:conHeight + "px" }'>
|
|
|
+ <div id="floorBox" class='floor-out' :style='{ height:conHeight + "px" }'>
|
|
|
<!-- 放开marginTop样式 -->
|
|
|
- <div class='floor-center' :style='{ marginTop : marginTop }'>
|
|
|
+ <!-- <div class='floor-center' :style='{ marginTop : marginTop }'> -->
|
|
|
+ <div class='floor-center'>
|
|
|
<div class='floor-item' :class='item.gname == currentFloorId?"isActive":""' @click='tabFloor(item,index)'
|
|
|
v-for='(item,index) in floorsArr' :key='index'>{{item.code}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class='icon-bottom' v-if='floorsArr.length>8'>
|
|
|
<i class="iconfont wanda-bottom" style="color:#9ca2a9;font-size:12px;"
|
|
|
- v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'></i>
|
|
|
+ v-show='parseInt(marginTop) < marginTopMax' v-repeat-click='decrease'></i>
|
|
|
<i class="iconfont wanda-bottom" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
|
|
|
- v-show='parseInt(marginTop) === marginTopMax'></i>
|
|
|
+ v-show='parseInt(marginTop) >= marginTopMax'></i>
|
|
|
<!-- v-repeat-click='decrease' -->
|
|
|
<!-- <img v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'
|
|
|
src='@/assets/images/iconBlackBottom.png' alt />
|
|
@@ -44,7 +45,7 @@ export default {
|
|
|
marginTop: 0,
|
|
|
marginTopMax: 0,
|
|
|
showNumber: 8, //需要展示的楼层数 //TODO:
|
|
|
- height: 39, //一个楼层的高度
|
|
|
+ height: 38, //一个楼层的高度
|
|
|
currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
|
|
|
conHeight: 0, // floor-out 的高度
|
|
|
direction: 1, //1:竖屏;2:横屏
|
|
@@ -59,6 +60,10 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
+ let listener = document.getElementById('floorBox')
|
|
|
+ listener.addEventListener('scroll', () => {
|
|
|
+ this.marginTop = document.getElementById('floorBox').scrollTop;
|
|
|
+ })
|
|
|
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
|
|
|
setTimeout(() => {
|
|
|
if (window.orientation === 0 || window.orientation === 180) {
|
|
@@ -78,7 +83,7 @@ export default {
|
|
|
*/
|
|
|
increase() {
|
|
|
const marginTop = parseInt(this.marginTop)
|
|
|
- marginTop < 0 && this.changeFloor(1, this.currIndex)
|
|
|
+ marginTop > 0 && this.changeFloor(1, this.currIndex)
|
|
|
},
|
|
|
/**
|
|
|
* @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
|
|
@@ -86,23 +91,25 @@ export default {
|
|
|
decrease() {
|
|
|
const marginTop = Math.abs(parseInt(this.marginTop)),
|
|
|
marginTopMax = Math.abs(parseInt(this.marginTopMax))
|
|
|
- marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
|
|
|
+ marginTop <= marginTopMax && this.changeFloor(-1, this.currIndex)
|
|
|
},
|
|
|
init() {
|
|
|
if (this.direction == 1) {
|
|
|
// 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
|
|
|
- this.conHeight = this.floorsArr.length * 37.5
|
|
|
+ this.height = 38
|
|
|
+ this.conHeight = this.floorsArr.length * 38
|
|
|
this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight
|
|
|
this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length
|
|
|
|
|
|
- this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
|
|
|
+ this.marginTopMax = (this.floorsArr.length - this.showNumber) * this.height
|
|
|
// this.changeFloor(0, 0);
|
|
|
// this.tabFloor(this.floorsArr[0], 0);
|
|
|
} else if (this.direction == 2) {
|
|
|
+ this.height = 34.5
|
|
|
this.conHeight = this.floorsArr.length * 30
|
|
|
- this.conHeight = this.conHeight >= 230 ? 230 : this.conHeight
|
|
|
+ this.conHeight = this.conHeight >= 240 ? 240 : this.conHeight
|
|
|
this.showNumber = this.floorsArr.length > 7 ? 7 : this.floorsArr.length
|
|
|
- this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
|
|
|
+ this.marginTopMax = (this.floorsArr.length - this.showNumber) * this.height
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
@@ -129,10 +136,10 @@ export default {
|
|
|
* @param {Object} item 选中的楼层信息
|
|
|
* @param {Number} index 楼层信息在floorsArr数组中的位置
|
|
|
*/
|
|
|
- tabFloor(item, index) {
|
|
|
+ tabFloor(item, index, isMove) {
|
|
|
this.currentFloorId = item.gname;
|
|
|
this.$emit("emitFloor", item)
|
|
|
- this.handlePosition(2, index, this.floorsArr.length)
|
|
|
+ this.handlePosition(2, index, this.floorsArr.length, isMove)
|
|
|
},
|
|
|
/**
|
|
|
* @description 楼层位置动画处理
|
|
@@ -140,35 +147,31 @@ export default {
|
|
|
* @param index 楼层 floorsArr
|
|
|
* @param len floorsArr
|
|
|
*/
|
|
|
- handlePosition(flag, index, len) {
|
|
|
- // 取出当前 marginTop
|
|
|
- let marginTop = parseInt(this.marginTop)
|
|
|
+ handlePosition(flag, index, len, isMove) {
|
|
|
+ let floorBox = document.getElementById("floorBox")
|
|
|
switch (flag) {
|
|
|
// 初始化进入页面,位置处理
|
|
|
case 0:
|
|
|
// 直接点击楼层,滚动楼层
|
|
|
case 2:
|
|
|
- // 将 marginTop 设置为对应的index 应滚动的距离
|
|
|
- marginTop = -index * this.height
|
|
|
- // marginTop 过大时,取最大值marginTopMax
|
|
|
- if (Math.abs(marginTop) >= Math.abs(this.marginTopMax)) {
|
|
|
- marginTop = parseInt(this.marginTopMax)
|
|
|
+ if (this.direction == 1 && isMove) {
|
|
|
+ let offsetLen = index - 6
|
|
|
+ floorBox.scrollTop = offsetLen > 0?offsetLen*this.height:0
|
|
|
+ } else if (this.direction == 2 && isMove) {
|
|
|
+ let offsetLen = index - 5
|
|
|
+ floorBox.scrollTop = offsetLen > 0?offsetLen*this.height:0
|
|
|
}
|
|
|
- // marginTop>0时,取0,防止楼层上边出现空白
|
|
|
- marginTop = marginTop >= 0 ? 0 : marginTop
|
|
|
- // index为0,marginTop设置为0
|
|
|
- index == 0 && (marginTop = 0)
|
|
|
- // index为最后一个,设置为最大marginTopMax
|
|
|
- index == len - 1 && (marginTop = parseInt(this.marginTopMax))
|
|
|
- this.marginTop = marginTop + 'px'
|
|
|
+ this.marginTop = floorBox.scrollTop;
|
|
|
break
|
|
|
// 1:向上滚动楼层
|
|
|
case 1:
|
|
|
- this.marginTop = marginTop + this.height + 'px'
|
|
|
+ floorBox.scrollTop = floorBox.scrollTop - this.height;
|
|
|
+ this.marginTop = floorBox.scrollTop;
|
|
|
break
|
|
|
// -1向下滚动楼层
|
|
|
case -1:
|
|
|
- this.marginTop = marginTop + this.height * -1 + 'px'
|
|
|
+ floorBox.scrollTop = floorBox.scrollTop + this.height;
|
|
|
+ this.marginTop = floorBox.scrollTop;
|
|
|
break
|
|
|
default:
|
|
|
break
|
|
@@ -207,9 +210,9 @@ export default {
|
|
|
.floor-out {
|
|
|
// max-height: 300px; //TODO:
|
|
|
min-height: 38px;
|
|
|
- overflow: hidden;
|
|
|
+ overflow-x: hidden;
|
|
|
position: relative;
|
|
|
- overflow-y: auto;
|
|
|
+ overflow-y: scroll;
|
|
|
&::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|