企业官网建设流程全解析

前言

来记录一段经常会忘记的但很好用的代码，主要是为了以后好找。

Web平滑滚动代码

// 平滑滚动publicscrollTo(id:string){constel=document.getElementById(id);if(el){el.scrollIntoView({behavior:'smooth',block:'center'});}}

behavior: 定义滚动动画，可以是"auto"、“smooth"或"instant”。
block: 定义垂直对齐方式，可以是"start"、“center”、“end"或"nearest”。
inline: 定义水平对齐方式，也可以是"start"、“center”、“end"或"nearest”。

Web监听页面滚动选中左侧导航栏

letthat=this;// 创建Observer实例constobserver=newIntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){// 监听到元素进入视口letidx=Number(entry.target.id.replace('serviceItems',''));if(that.clickIndex<0){that.activeKey=idx;}elseif(that.clickIndex===idx){that.clickIndex=-1;}}});},{threshold:[0.2]}// 20% 可见时触发);this.$nextTick(()=>{// 开始观察元素this.listData.forEach((item,index)=>{letel=document.querySelector(`#serviceItems${index}`);observer.observe(el);});});

uni-app页面滚动

uni.pageScrollTo({selector:'#target-element',duration:300});

结语

关注我，不迷路。
不定时分享前端相关问题以及解决方案。
希望能帮助每个在开发类似功能的小伙伴。