赋能案例 滚动条联动

This commit is contained in:
a0049873 2022-07-05 11:28:30 +08:00
parent a6488d0c92
commit ae188ef656
1 changed files with 89 additions and 65 deletions

View File

@ -2,7 +2,7 @@
* @Author: hisense.zhangfeihu * @Author: hisense.zhangfeihu
* @Date: 2022-06-13 10:22:27 * @Date: 2022-06-13 10:22:27
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-04 15:32:52 * @LastEditTime: 2022-07-05 11:25:25
* @Description: 赋能案例-详情页 * @Description: 赋能案例-详情页
--> -->
<template> <template>
@ -131,19 +131,16 @@
tabName.value = '案例背景' tabName.value = '案例背景'
selectOne(val).then((res) => { selectOne(val).then((res) => {
res.data.data.infoList.map((item, index) => { res.data.data.infoList.map((item, index) => {
console.log('res.data.data.infoList', res.data.data.infoList)
if (item.attrType == '图片') { if (item.attrType == '图片') {
res.data.data.infoList.splice(index, 1) res.data.data.infoList.splice(index, 1)
} }
}) })
res.data.data.infoList.map((item, index) => { res.data.data.infoList.map((item, index) => {
console.log('res.data.data.infoList', res.data.data.infoList)
if (item.attrType == '应用领域') { if (item.attrType == '应用领域') {
res.data.data.infoList.splice(index, 1) res.data.data.infoList.splice(index, 1)
} }
}) })
dataFrom.value = res.data.data dataFrom.value = res.data.data
console.log('dataFrom.value', dataFrom.value)
}) })
} }
// //
@ -165,7 +162,6 @@
} }
}) })
dataList.value = res.data.data.records dataList.value = res.data.data.records
console.log('dataList.value', dataList.value)
}) })
} }
// //
@ -181,70 +177,98 @@
//tab //tab
const tabSwitch = (item, index) => { const tabSwitch = (item, index) => {
tabName.value = item.attrType tabName.value = item.attrType
if (index != 0 && index != 3) {
let top = let top =
document.querySelector( document.querySelector(
'#assign-case-detail-page-content-center-card' + index '#assign-case-detail-page-content-center-card' + index
).offsetTop - ).offsetTop -
document.querySelector( 330 -
'#assign-case-detail-page-content-center-card' + (index - 1) 60 * index
).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)
document.documentElement.scrollTop = top document.documentElement.scrollTop = top
document.body.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(() => { onMounted(() => {
init() // init()
// console.clear() // console.clear()
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll( let top = document.documentElement.scrollTop
'.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 {
if ( if (
scrollTop.value >= domArr.value[i].offsetTop - 50 && top <
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 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-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
position: fixed; position: fixed;
top: 4.9rem; top: 3.9rem;
div { div {
height: 0.3rem; height: 0.3rem;
padding-right: 0.7rem; padding-right: 0.7rem;