VUE实现吸顶效果

最新推荐文章于 2024-08-02 11:16:33 发布

他说_

最新推荐文章于 2024-08-02 11:16:33 发布

阅读量1k

点赞数

分类专栏： VUE node 文章标签： vue html5 javascript

本文链接：https://blog.csdn.net/m0_45041148/article/details/106689997

版权

本文介绍了如何在Vue中实现吸顶效果。功能拆分为监听用户页面行为，当滚动到特定区域时，使tabbar吸顶。逻辑包括将tabbar锚点与相关区域对应，点击锚点跳转，以及监听滚动位置改变tabbar的active状态。核心代码逻辑涉及DOM元素的处理。

摘要由CSDN通过智能技术生成

之前疫情在家办公的时候，做了很多吸顶效果，但由于当时在家办公工作节奏较紧，一直没有做技术积累，现在做一下沉淀。

功能拆分：
吸顶效果简单来说，就是监听用户的页面行为操作，当页面向下滚动到某一个区域值（默认是滚动到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"
                        :