之前疫情在家办公的时候,做了很多吸顶效果,但由于当时在家办公工作节奏较紧,一直没有做技术积累,现在做一下沉淀。
功能拆分:
吸顶效果简单来说,就是监听用户的页面行为操作,当页面向下滚动到某一个区域值(默认是滚动到tabbar的位置),tabbar会进行吸顶,然后脱离文档流,不再进行滚动,这个效果在各大APP使用较多,具体不再细说。
逻辑拆分
- 将tabbar锚点对应相关区域,点击锚点跳转到对应区域
- 监听页面滚动位置,根据滚动,判断滚动位置在哪个锚点对应的区域,tabbar标签的active状态随之改变
代码逻辑及其功能函数
tabbar DOM元素处
// data数据定义处
data(){
return {
searchBarFixed: 0, // 是否吸顶
curIndex: 0, // 当前导航的索引
isScroll: true, // 给定一个标识,锚点事件不触发滚动
moduleList: [
// tabbar按钮,url是对应锚点位置,isClick是初始的active状态
{
"text": "tab1",
"url": "#travel",
"isClick": 1
},
{
"text": "tab2",
"url": "#service",
"isClick": 0
},
{
"text": "tab3",
"url": "#bigData",
"isClick": 0
},
{
"text": "tab4",
"url": "#reports",
"isClick": 0
}
],
}
}
HTML代码处 ⬇️
// moduleList是在data定义的数据
// 占位,避免出现tab回去错过一些地方的情况
<div class="landing-bar landing-bar1" :class="{'active': searchBarFixed === 1}">
<ol class="head-card-anchor head-card-anchor1" v-if="moduleList && moduleList.length">
<li v-for="(item, index) in moduleList" :key="index"
: