赋能案例 滚动条联动
This commit is contained in:
a0049873
parent
a6488d0c92
commit
ae188ef656
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.zhangfeihu
|
||||
* @Date: 2022-06-13 10:22:27
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-04 15:32:52
|
||||
* @LastEditTime: 2022-07-05 11:25:25
|
||||
* @Description: 赋能案例-详情页
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -131,19 +131,16 @@
|
|||
tabName.value = '案例背景'
|
||||
selectOne(val).then((res) => {
|
||||
res.data.data.infoList.map((item, index) => {
|
||||
console.log('res.data.data.infoList', res.data.data.infoList)
|
||||
if (item.attrType == '图片') {
|
||||
res.data.data.infoList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
res.data.data.infoList.map((item, index) => {
|
||||
console.log('res.data.data.infoList', res.data.data.infoList)
|
||||
if (item.attrType == '应用领域') {
|
||||
res.data.data.infoList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
dataFrom.value = res.data.data
|
||||
console.log('dataFrom.value', dataFrom.value)
|
||||
})
|
||||
}
|
||||
//其他案例
|
||||
|
|
@ -165,7 +162,6 @@
|
|||
}
|
||||
})
|
||||
dataList.value = res.data.data.records
|
||||
console.log('dataList.value', dataList.value)
|
||||
})
|
||||
}
|
||||
//监听路由发生变化
|
||||
|
|
@ -181,70 +177,98 @@
|
|||
//tab点击事件
|
||||
const tabSwitch = (item, index) => {
|
||||
tabName.value = item.attrType
|
||||
if (index != 0 && index != 3) {
|
||||
let top =
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card' + index
|
||||
).offsetTop -
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card' + (index - 1)
|
||||
).offsetHeight
|
||||
let view = document.getElementById(
|
||||
'assign-case-detail-page-content-left-border-id'
|
||||
)
|
||||
view.style.top =
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card' + (index - 1)
|
||||
).offsetHeight + 'px'
|
||||
console.log('view.style.top', view.style.top)
|
||||
330 -
|
||||
60 * index
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
} else if (index == 0) {
|
||||
let top = 0
|
||||
let view = document.getElementById(
|
||||
'assign-case-detail-page-content-left-border-id'
|
||||
)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
view.style.top = '490px'
|
||||
} else if (index == 3) {
|
||||
let top = document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card' + index
|
||||
).offsetTop
|
||||
let view = document.getElementById(
|
||||
'assign-case-detail-page-content-left-border-id'
|
||||
)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
view.style.top = '220px'
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
// init()
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll(
|
||||
'.assign-case-detail-page-content-center-card'
|
||||
)
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
let top = document.documentElement.scrollTop
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
top <
|
||||
100 +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card0'
|
||||
).offsetHeight -
|
||||
1
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
tabName.value = '案例背景'
|
||||
} else if (
|
||||
top >=
|
||||
100 +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card0'
|
||||
).offsetHeight &&
|
||||
top <
|
||||
100 +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card0'
|
||||
).offsetHeight +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card1'
|
||||
).offsetHeight -
|
||||
1
|
||||
) {
|
||||
tabName.value = '业务挑战'
|
||||
} else if (
|
||||
top >=
|
||||
100 +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card0'
|
||||
).offsetHeight +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card1'
|
||||
).offsetHeight &&
|
||||
top <
|
||||
100 +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card0'
|
||||
).offsetHeight +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card1'
|
||||
).offsetHeight +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card2'
|
||||
).offsetHeight -
|
||||
1
|
||||
) {
|
||||
tabName.value = '解决方案'
|
||||
} else if (
|
||||
top >=
|
||||
100 +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card0'
|
||||
).offsetHeight +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card1'
|
||||
).offsetHeight +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card2'
|
||||
).offsetHeight &&
|
||||
top <
|
||||
100 +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card0'
|
||||
).offsetHeight +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card1'
|
||||
).offsetHeight +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card2'
|
||||
).offsetHeight +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card3'
|
||||
).offsetHeight -
|
||||
1
|
||||
) {
|
||||
tabName.value = '案例成效'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -327,7 +351,7 @@
|
|||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
position: fixed;
|
||||
top: 4.9rem;
|
||||
top: 3.9rem;
|
||||
div {
|
||||
height: 0.3rem;
|
||||
padding-right: 0.7rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue