全局重载运算符 email solr enums textview cad怎么重复上一次命令 monkey安装 excel加减混合求和 数据库学习 python加法 python在线教程 python文件写入 python自定义异常 javaswitch语句 安装java环境 java编译环境 java替换字符 java如何配置环境变量 java获得当前日期 linux服务器 php实例代码 tmac修改器 隐藏虚拟键 电脑基础 地下城怎么双开 kontakt 视频解析软件 windowsjs延时函数 万能播放器电脑版 js获取子元素 facetime要钱吗 流媒体下载 拳皇2005出招表 摇骰子表情包 小米手环怎么连接手机 日文游戏乱码转换工具 下拉框默认选中 熊猫关键词 cpu和显卡怎么搭配 class选择器
当前位置: 首页 > 学习教程  > 编程语言

VUE实现吸顶效果

2020/10/16 18:16:46 文章标签:

之前疫情在家办公的时候,做了很多吸顶效果,但由于当时在家办公工作节奏较紧,一直没有做技术积累,现在做一下沉淀。 功能拆分: 吸顶效果简单来说,就是监听用户的页面行为操作,当页面向下滚动到某…

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

功能拆分:
吸顶效果简单来说,就是监听用户的页面行为操作,当页面向下滚动到某一个区域值(默认是滚动到tabbar的位置),tabbar会进行吸顶,然后脱离文档流,不再进行滚动,这个效果在各大APP使用较多,具体不再细说。

逻辑拆分

  1. 将tabbar锚点对应相关区域,点击锚点跳转到对应区域
  2. 监听页面滚动位置,根据滚动,判断滚动位置在哪个锚点对应的区域,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"
                        :class="{'active': curIndex === index}">
						<a
							@click="changeMoudle(item, index)"
							href="javascript:;"
                            v-log="`navi-${item.text}`"
						>
							{{item.text}}
						</a>
					</li>
				</ol>
	</div>
    <div class="landing-bar" :class="{'hidden': searchBarFixed === 1, 'none': searchBarFixed === 0}">
    	<ol class="head-card-anchor" v-if="moduleList && moduleList.length">
					<li v-for="(item, index) in moduleList" :key="index"
                        :class="{'active': curIndex === index}">
						<a
							@click="changeMoudle(item, index)"
							href="javascript:;"
                            v-log="`navi-${item.text}`"
						>
							{{item.text}}
						</a>
					</li>
				</ol>
	</div>

// methods方法:
changeMoudle(item, index) {
	// 点击导航 触发锚点切换事件
	let that = this;
    this.curIndex = index;
    // 给定一个标识,锚点事件不触发滚动
    this.isScroll = false;
	let contentTopHeight = document.querySelector('.landing-content').offsetTop;
    let headHeight = document.querySelector('.head-card').offsetTop;
    var barHeight = document.querySelector('.landing-bar1').offsetHeight;
	var anchorHeight = document.querySelector('.head-card-anchor1').clientHeight;
	let key = item.url.replace(/^#/, '');
    let curRef = this.$refs[key];
    let anchor = curRef.offsetTop;
	if(index == 0) {
		window.scrollTo(0,headHeight - 20)
	} else {
		this.$nextTick(() => {
			window.scrollTo(0, contentTopHeight + anchor - anchorHeight);
		})
	}
        console.log('anchor', headHeight);
},
// 判断滚动多长
		handleScroll () {
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
		    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
		    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

		    let contentTopHeight = document.querySelector('.landing-content').offsetTop;
		    var offsetTop = document.querySelector('.landing-bar1').offsetTop;
		    var barHeight = document.querySelector('.landing-bar1').offsetHeight;
			var anchorHeight = document.querySelector('.head-card-anchor1').clientHeight;

			var gunaKongTop = this.$refs.travel.offsetTop;
			var serviceTop = this.$refs.service.offsetTop;
			var bigDataTop = this.$refs.bigData.offsetTop;
			// var reportsTop = this.$refs.reports.offsetTop;

		    // 数据不存在则不触发滚动事件
		    if (!(this.moduleList && this.moduleList.length > 0)) {
		        return
		    }
		    let theta = contentTopHeight;
		    let length = this.moduleList.length;

		    if (scrollTop - contentTopHeight < gunaKongTop) {
				this.searchBarFixed = 0;
			} else {
				this.searchBarFixed = 1;
			}


		    // isScroll 用于避免锚点事件触发页面滚动
		    if (!this.isScroll) {
		        return;
		    }
			if (scrollTop - theta > gunaKongTop - anchorHeight) {
				this.curIndex = 0;
			}
		    if (scrollTop - theta > serviceTop - anchorHeight) {
				this.curIndex = 1;
			}
		    if (scrollTop - theta > bigDataTop - anchorHeight) {
				this.curIndex = 2;
			}
		    if (scrollTop - theta > reportsTop) {
		         this.curIndex = 3;
			}
		    // trick处理,当页面滑到最底部时,需要分别切换到tab2和tab3上,最后在tab3上停留
		    if (scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
		         this.curIndex = 2;
		         setTimeout(() => {
		         	// 此处是因为我们页面的倒数第二个的模块内容较短,剩余页面较短,不足以撑够一屏,所以做成500毫秒后将倒数第二个的tabbar做一个过渡效果,过渡到最后一个
		         	// 如果页面内容长度OK,直接使this.curIndex为3即可
		             this.curIndex = 3;
		         }, 500);
		    }
		}


// watch监听:
watch: {
        isScroll(val, oldval) {
            if (val === false) {
                var timmer = setTimeout(() => {
                    clearTimeout(timmer);
                    this.isScroll = true;
                }, 500);
            } else {
                this.isScroll = true;
            }
        }
    },

// destroy清除监听
destroyed () {
	window.removeEventListener('scroll', this.handleScroll)
}

以上就是吸顶的效果,css样式就不贴了


本文链接: http://www.dtmao.cc/news_show_300393.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?