|
|
@ -4,98 +4,100 @@ |
|
|
export function onScroll() { |
|
|
export function onScroll() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取所有锚点元素
|
|
|
// 获取所有锚点元素
|
|
|
const navContents = document.querySelectorAll('.models') |
|
|
const navContents = document.querySelectorAll('.models') |
|
|
|
|
|
|
|
|
// 所有锚点元素的 offsetTop
|
|
|
// 所有锚点元素的 offsetTop
|
|
|
const offsetTopArr = [] |
|
|
const offsetTopArr = [] |
|
|
navContents.forEach(item => { |
|
|
navContents.forEach(item => { |
|
|
offsetTopArr.push(item.offsetTop) |
|
|
offsetTopArr.push(item.offsetTop) |
|
|
}) |
|
|
}) |
|
|
// 获取当前文档流的 scrollTop
|
|
|
// 获取当前文档流的 scrollTop
|
|
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop |
|
|
//const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
|
|
// 定义当前点亮的导航下标
|
|
|
const scrollTop = document.querySelector('.app-container').scrollTop || document.body.scrollTop |
|
|
let navIndex = 0 |
|
|
|
|
|
for (let n = 0; n < offsetTopArr.length; n++) { |
|
|
// 定义当前点亮的导航下标
|
|
|
// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
|
|
|
let navIndex = 0 |
|
|
// 那么此时导航索引就应该是n了
|
|
|
for (let n = 0; n < offsetTopArr.length; n++) { |
|
|
if (scrollTop+210 >= offsetTopArr[n]) { |
|
|
// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
|
|
|
navIndex = n |
|
|
// 那么此时导航索引就应该是n了
|
|
|
} |
|
|
if (scrollTop + 210 >= offsetTopArr[n]) { |
|
|
//若滚动条已经到底则直接激活最后一个导航
|
|
|
navIndex = n |
|
|
if (scrollTop + document.documentElement.clientHeight === document.documentElement.scrollHeight) { |
|
|
|
|
|
navIndex = offsetTopArr.length - 1; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
//active.value = navIndex
|
|
|
//若滚动条已经到底则直接激活最后一个导航
|
|
|
return navIndex; |
|
|
if (scrollTop + document.documentElement.clientHeight === document.documentElement.scrollHeight) { |
|
|
} |
|
|
navIndex = offsetTopArr.length - 1; |
|
|
|
|
|
|
|
|
// 跳转到指定索引的元素
|
|
|
|
|
|
export function scrollTo(index) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取目标的 offsetTop
|
|
|
|
|
|
// css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
|
|
|
|
|
|
const targetOffsetTop = document.querySelector(`.content .models:nth-child(${index + 1})`).offsetTop |
|
|
|
|
|
// 获取当前 offsetTop
|
|
|
|
|
|
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop |
|
|
|
|
|
// 定义一次跳 150 个像素
|
|
|
|
|
|
const STEP = 50 |
|
|
|
|
|
// 判断是往下滑还是往上滑
|
|
|
|
|
|
if (scrollTop > targetOffsetTop) { |
|
|
|
|
|
// 往上滑
|
|
|
|
|
|
smoothUp() |
|
|
|
|
|
} else { |
|
|
|
|
|
// 往下滑
|
|
|
|
|
|
smoothDown() |
|
|
|
|
|
} |
|
|
} |
|
|
// 定义往下滑函数
|
|
|
} |
|
|
function smoothDown() { |
|
|
//active.value = navIndex
|
|
|
// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
|
|
|
return navIndex; |
|
|
if (scrollTop < targetOffsetTop) { |
|
|
} |
|
|
// 如果和目标相差距离大于等于 STEP 就跳 STEP
|
|
|
|
|
|
// 否则直接跳到目标点，目标是为了防止跳过了。
|
|
|
// 跳转到指定索引的元素
|
|
|
if (targetOffsetTop - scrollTop >= STEP) { |
|
|
/* export function scrollTo(index) { |
|
|
scrollTop += STEP |
|
|
|
|
|
} else { |
|
|
|
|
|
scrollTop = targetOffsetTop |
|
|
// 获取目标的 offsetTop
|
|
|
} |
|
|
// css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
|
|
|
document.body.scrollTop = scrollTop |
|
|
const targetOffsetTop = document.querySelector(`.content .models:nth-child(${index + 1})`).offsetTop |
|
|
document.documentElement.scrollTop = scrollTop |
|
|
// 获取当前 offsetTop
|
|
|
// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
|
|
|
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop |
|
|
requestAnimationFrame(smoothDown) |
|
|
// 定义一次跳 150 个像素
|
|
|
|
|
|
const STEP = 50 |
|
|
|
|
|
// 判断是往下滑还是往上滑
|
|
|
|
|
|
if (scrollTop > targetOffsetTop) { |
|
|
|
|
|
// 往上滑
|
|
|
|
|
|
smoothUp() |
|
|
|
|
|
} else { |
|
|
|
|
|
// 往下滑
|
|
|
|
|
|
smoothDown() |
|
|
|
|
|
} |
|
|
|
|
|
// 定义往下滑函数
|
|
|
|
|
|
function smoothDown() { |
|
|
|
|
|
// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
|
|
|
|
|
|
if (scrollTop < targetOffsetTop) { |
|
|
|
|
|
// 如果和目标相差距离大于等于 STEP 就跳 STEP
|
|
|
|
|
|
// 否则直接跳到目标点，目标是为了防止跳过了。
|
|
|
|
|
|
if (targetOffsetTop - scrollTop >= STEP) { |
|
|
|
|
|
scrollTop += STEP |
|
|
|
|
|
} else { |
|
|
|
|
|
scrollTop = targetOffsetTop |
|
|
} |
|
|
} |
|
|
|
|
|
document.body.scrollTop = scrollTop |
|
|
|
|
|
document.documentElement.scrollTop = scrollTop |
|
|
|
|
|
// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
|
|
|
|
|
|
requestAnimationFrame(smoothDown) |
|
|
} |
|
|
} |
|
|
// 定义往上滑函数
|
|
|
} |
|
|
function smoothUp() { |
|
|
// 定义往上滑函数
|
|
|
if (scrollTop > targetOffsetTop) { |
|
|
function smoothUp() { |
|
|
if (scrollTop - targetOffsetTop >= STEP) { |
|
|
if (scrollTop > targetOffsetTop) { |
|
|
scrollTop -= STEP |
|
|
if (scrollTop - targetOffsetTop >= STEP) { |
|
|
} else { |
|
|
scrollTop -= STEP |
|
|
scrollTop = targetOffsetTop |
|
|
} else { |
|
|
} |
|
|
scrollTop = targetOffsetTop |
|
|
document.body.scrollTop = scrollTop |
|
|
|
|
|
document.documentElement.scrollTop = scrollTop |
|
|
|
|
|
requestAnimationFrame(smoothUp) |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
document.body.scrollTop = scrollTop |
|
|
|
|
|
document.documentElement.scrollTop = scrollTop |
|
|
|
|
|
requestAnimationFrame(smoothUp) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
export function formatDate(timestamp) { |
|
|
} */ |
|
|
var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
|
|
export function formatDate(timestamp) { |
|
|
|
|
|
var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
|
|
var Y = date.getFullYear() + '-'; |
|
|
|
|
|
|
|
|
var Y = date.getFullYear() + '-'; |
|
|
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; |
|
|
|
|
|
|
|
|
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; |
|
|
var D = date.getDate() + ' '; |
|
|
|
|
|
|
|
|
var D = date.getDate() + ' '; |
|
|
var h = date.getHours() + ':'; |
|
|
|
|
|
|
|
|
var h = date.getHours() + ':'; |
|
|
var m = date.getMinutes() + ':'; |
|
|
|
|
|
|
|
|
var m = date.getMinutes() + ':'; |
|
|
var s = date.getSeconds(); |
|
|
|
|
|
|
|
|
var s = date.getSeconds(); |
|
|
return Y+M+D+h+m+s; |
|
|
|
|
|
} |
|
|
return Y + M + D + h + m + s; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
