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. sed与awk

    sed 格式 sed 选项 控制命令 文件或标准输入 sed 流程: (循环打印) sed是将文件里的每一行读入模式空间进行操作, sed选项 -r 支持正则表达 -n 取消默认打印 清空当前模式空间 ...

  2. HttpURLConnection提交数据

    使用GET方式向服务器端提交数据 * 原理:把要提交的数据组拼到Url后面 * http协议规定数据长度不超过4kb,IE浏览器超过1kb就会丢弃掉后面的数据 * 缺点:数据不安全 * 优点:代码书写 ...

  3. Selenium 2自动化测试实战41(多线程技术)

    多线程技术 python通过两个标准库thread和threading提供对线程的支持.thread提供了低级别的,原始的线程以及一个简单的锁.threading基于Java的线程模型设计. 1.th ...

  4. idea 中的new file 没有jsp

    idea 的new file中没有你需要的文件,原因是IDEA认为当前包下不应该创建该文件,以就没有创建该文件的选项. 以jsp 文件为例.其他文件类似. 解决方法: File ---> pro ...

  5. 使用checked和unchecked来对整数溢出进行检测和忽略

    在C#中,整数int32的取值为-2147483648~2147473647(可以通过int.MaxValue和int.MinValue获得)当超出这个范围后,编译器不会进行检查,仍然会进行运算,但得 ...

  6. 华为HCNA乱学Round 1:登录权限

    由于公司要用到华为设备,以前也学得比较基础就顺便补充一下.

  7. WebContent下新建目录放入jsp,跳转servlet页面出错解决

    为方便分类jsp文件,于是在web-content下新建了一级目录,将jsp文件放入其中,结果原本跳转的servlet出现404错误: 解决如下: 在用eclipse创建的servle会自动生成一个注 ...

  8. krpano下全屏后弹窗失效问题解决方法

    原因 krpano 自身的全屏仅全屏自身,以外的html效果将无法显示 解决方法 把全屏按钮换成浏览器自身的全屏效果 解决步骤 vtourskin.xml <layer name="n ...

  9. CGI 萃取技术 __type_traits

    前言 上一篇文章讲了 iterator_traits 的编程技法,非常棒适度弥补了 C++ 语言的不足. STL 只对迭代器加以规范,制定了 iterator_traits 这样的东西. CGI 把这 ...

  10. Anaconda Spyder 常用快捷键

    Ctrl+1 注释.取消注释 Ctrl+4/5 块注释 / 取消块注释 Ctrl+D 删除一行 Ctrl+L 转到行 Ctrl+G/左键 查找函数定义 F9 运行选中代码 F12 断点 / 取消断点 ...