data(){
return{
list:[],
swiperOption:"",
xiding : "",
// 轮播高度
SwiperHeight:''
}
},
mounted(){
this.onload()
// 获取轮播图图片的高度
setTimeout(()=> {
// 通过ref获取轮播dom,获取轮播的高度
console.log(this.$refs.mySwiper.$el.offsetHeight)
this.SwiperHeight = this.$refs.mySwiper.$el.offsetHeight
},2000) // 监听滑动事件
window.onscroll = this.handleScroll
},
destroyed(){
window.onscroll = null; //清除滑动事件绑定
},
methods:{
handleScroll(){
// 获取屏幕滑动的高度
console.log(document.documentElement.scrollTop)
// 滑动高度 > 轮播dom高度 吸顶
if(document.documentElement.scrollTop > this.SwiperHeight){
// 吸顶
this.xiding = true
}else{
// 取消吸
this.xiding = false
}
},

vue实现吸顶的更多相关文章

  1. vue滑动吸顶以及锚点定位

    Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...

  2. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  3. Vue开发——实现吸顶效果

    因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的. 进入正题,先看下效果图: 其实js做这个效果还 ...

  4. tabControl组件的吸顶效果

    最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...

  5. 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一

    如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的 ...

  6. status bar、navigationBar、tableView吸顶view设置

    1. 隐藏navigationBar self.navigationController.navigationBar.hidden = YES; 2. status bar设置 -(void)view ...

  7. collectionview cell吸顶效果

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Hiragino Sans GB"; color: #cf8724 } ...

  8. 原生js实现吸顶导航和回到顶部特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ECSTORE导航吸顶功能

    ecstore导航吸顶功能,在导航父元素中加入id,如: <div id="mainNav1"></div> 在footer.html中添加以下js代码: ...

随机推荐

  1. linux下如何查看当前内核的配置?

    答: zcat /proc/config.gz 当然有个前提条件,需要打开内核的以下两个选项(CONFIG_IKCONFIG和CONFIG_IKCONFIG_PROC): General setup ...

  2. MYSQL通过循环向数据库中插入数据

    BEGINdeclare i int default 305;declare a char(255);REPEATset a=concat("测试机构00",cast(i as c ...

  3. RabbitMQ学习之:(八)Topic Exchange (转贴+我的评论)

    From: http://lostechies.com/derekgreer/2012/05/18/rabbitmq-for-windows-topic-exchanges/ RabbitMQ for ...

  4. MongoDB集群-主从复制(副本集)、failover

    1.概念 主从复制的目的:数据冗余.备份.读写分离 主从方式:一主一从(不推荐,只能实现复制,主节点挂掉且未重新启动的时候,无法提升从节点为master),一主一从一裁判,一主多从 复制方式:主节点记 ...

  5. spring-boot集成8:集成shiro,jwt

    Shrio是一个轻量级的,基于AOP 和 Servlet 过滤器的安全框架.它提供全面的安全性解决方案,同时在 Web 请求级和方法调用级处理身份确认和授权. JWT(JSON Web Token)是 ...

  6. Spark GraphX初探

    1. Graphx概念 针对某些领域,如社交网络.语言建模等,graph-parallel系统可以高效地执行复杂的图形算法,比一般的data-parallel系统更快. Graphx是将graph-p ...

  7. Django-Form组件-forms.ModelForm

    froms.ModelForm 具有models操作数据库字段的功能,还具有Form的功能.较Form组件而言,根据model自动生成Form. 使用注册的案例进行初步认识 # 使用ModelForm ...

  8. pandas的用法

    1.a = pandas.read_csv(filepath):读取.csv格式的文件到列表a中,文件在路径filepath中 pandas.core.frame.DataFrame是pandas的核 ...

  9. Python全栈开发之6、面向对象

    一.创建类和对象 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例 ...

  10. [转帖]k8s.gcr.io/pause的作用

    k8s.gcr.io/pause的作用 https://blog.51cto.com/liuzhengwei521/2422120 weilovepan520关注0人评论196人阅读2019-07-2 ...