vue实现stickUp的效果

先学习这篇文章
顶部吸顶的效果查看

效果1：

效果2：

<template><div><header class="header" ref='header'>高度250</header><ul class="nav" :class="{isFixed:isFixed}" ref="nav"><li class="item" v-for="(item,index) in new Array(4)" :key="index" @click="selectItem(index)":class="{'current':currentIndex===index}">{{index+1}}，高度50</li></ul><div class="fakeNavHeight" v-if="isFixed"></div><ul class="content"><li class="tips" ref="foodList" v-for="(item,index) in new Array(4)" :key="index">{{index+1}}</li></ul></div>
</template>

<script>
var throttle = require('lodash/throttle'); //从lodash中引入的throttle节流函数
export default {name: 'stickUp',data() {return {listHeight: [],// currentIndex: 0,isFixed: false, //是否固定的throttleScroll: null, //定义一个截流函数的变量,scrollTop: 0, //页面实时滚动的距离headerHeight: '', //header部分的高度，navHeight: '', //nav部分的高度，};},computed: {currentIndex() {console.info('scrollTop', this.scrollTop, 'headerHeight', this.headerHeight, 'navHeight', this.navHeight);for (let i = 0; i < this.listHeight.length; i++) {let height1 = this.listHeight[i];let height2 = this.listHeight[i + 1];if (this.scrollTop - this.headerHeight >= height1 && this.scrollTop - this.headerHeight < height2) {return i;} else if ($(window).height() + this.scrollTop + 20 >= $(document).height()) {//到达底部还有20px 触发currentIndex选中 , 只针对最后一个元素不满整屏的高度的时候return this.listHeight.length - 2;}}return 0;},},methods: {selectItem(index) {console.info('index', index);//恒定时间var speed = 200; //滑动的速度$('body,html').animate({ scrollTop: this.listHeight[index] + this.headerHeight }, speed);return false;},//滚动的函数handleScroll() {this.headerHeight = $(this.$refs.header).outerHeight(); //header的高度this.scrollTop = $(window).scrollTop(); //滚动的距离的，为什么这里使用的jq，因为不用考虑的什么的兼容问题this.navHeight = $(this.$refs.nav).outerHeight(); //nav的高度//判断是否吸顶效果if (this.scrollTop > this.headerHeight) {this.isFixed = true;} else {this.isFixed = false;}},_calculateHeight() {let foodList = this.$refs.foodList;let height = 0;this.listHeight.push(height);for (let i = 0; i < foodList.length; i++) {let item = foodList[i];height += item.clientHeight;this.listHeight.push(height);}console.info('每个东西的高度', this.listHeight, '页面总的高度', $(window).height(), $(document).height());},},mounted() {this.$nextTick(() => {//这里使用监听的scroll的事件，为什么要使用的节流函数，如果不使用的，页面一直在滚动计算的，这样在//使用手机时候，出现非常卡的，隔一段时间计算，大大降低了性能的消耗（具体的好处自己去查资料）window.addEventListener('scroll', this.throttleScroll, false);this._calculateHeight();});this.throttleScroll = throttle(this.handleScroll, 100);},destroyed() {//离开页面需要remove这个监听器，不然还是卡到爆。window.removeEventListener('scroll', this.throttleScroll);},
};
</script>

<style lang="scss" scoped>
.header {height: 5rem;width: 100%;background-color: red;
}
.nav {display: flex;height: 1rem;background-color: transparent;line-height: 1rem;text-align: center;width: 100%;&.isFixed {position: fixed;left: 0;top: 0;z-index: 9999;}.item {flex: 1;&.current {background-color: #000;color: #fff;font-weight: 900;}}
}
.fakeNavHeight {height: 1rem;width: 100%;
}
.content {.tips {height: 15rem;width: 100%;&:first-child {background-color: red;}&:nth-child(2) {background-color: pink;}&:nth-child(3) {background-color: yellow;}&:last-child {background-color: blue;height: 6rem;}}
}
</style>

vue实现stickUp的效果相关推荐

黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果一.总结一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
Vue实现跑马灯效果以及封装为组件发布
Vue 实现跑马灯效果前言最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...
vue openlayer 添加风场效果
vue openlayer 添加风场效果一个简单的小demo,就是在一个openlayers地图上面添加风场效果. 话不多说,直接进入正题. 首先我们需要安装一个插件. 插件地址:https://w ...
vue广告栏上下滚动效果
vue广告栏上下滚动效果 html部分 <div class="roll"><img src="xxx.jpg" alt /><u ...
vue实现数字滚动效果
vue实现数字滚动效果 npm 下载 vue-count-to https://npmmirror.com/package/vue-count-to
Vue实现音乐播放效果（适合小白学习）
Vue实现音乐播放效果(适合小白学习) 播放器介绍五个html主要标签功能介绍 (1)搜索 (2)播放效果: 完整代码: 播放器介绍总体的效果如图所示,没有加很多css特效,需要美化的小白,可以 ...
【Vue实用功能】Vue中实现粒子效果 particles.js
Vue中实现粒子效果为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果下载particles.j ...
vue做数字滚动效果
vue实现数字滚动效果近期在做项目的时候,产品要求实现数字滚动效果如下: 用jquery实现 html: <div class="develop"> <!--滚 ...

vue实现stickUp的效果

vue实现stickUp的效果相关推荐

最新文章

热门文章