vue实现吸顶
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实现吸顶的更多相关文章
- vue滑动吸顶以及锚点定位
Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- Vue开发——实现吸顶效果
因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的. 进入正题,先看下效果图: 其实js做这个效果还 ...
- tabControl组件的吸顶效果
最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...
- 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一
如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的 ...
- status bar、navigationBar、tableView吸顶view设置
1. 隐藏navigationBar self.navigationController.navigationBar.hidden = YES; 2. status bar设置 -(void)view ...
- collectionview cell吸顶效果
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Hiragino Sans GB"; color: #cf8724 } ...
- 原生js实现吸顶导航和回到顶部特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ECSTORE导航吸顶功能
ecstore导航吸顶功能,在导航父元素中加入id,如: <div id="mainNav1"></div> 在footer.html中添加以下js代码: ...
随机推荐
- LC 871. Minimum Number of Refueling Stops 【lock, hard】
A car travels from a starting position to a destination which is target miles east of the starting p ...
- Linux(CentOS / RHEL 7) 防火墙
CentOS / RHEL 7 防火墙 Table of Contents 1. 简述 2. 常用基本操作 2.1. 查看防火墙状态 2.2. 开启防火墙 2.3. 关闭防火墙 2.4. 开机自动启动 ...
- Android中图片优化
1.对图片进行压缩:建议使用TinyPNG工具压缩 2.WebP格式(支持4.0以上)可减少文件大小 3.尽量使用NinePatch的PNG 4.图片缓存
- ssm整合用到的依赖jar包(不充足)
<!--spring 的核心的jar包--><dependency> <groupId>org.springframework</groupId> &l ...
- mysql安装报错error: Header V3 DSA signature: BAD, key ID
CentOS安装rpm安装MySQL时爆出警告: warning: mysql-community-server-5.7.18-1.el6.x86_64.rpm: Header V3 DSA/SHA1 ...
- 1293 - Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause
在数据库执行脚本文件时,执行到一半会遇到 这种问题: 出错处:2018-05-14 18:53:38 行号:712454 错误代码: 1293 - Incorrect table definitio ...
- svn clearup svn cleanup failed–previous operation has not finished; run cleanup if it was int错误的解决办法
今天svn提交,出现异常:svn cleanup failed–previous operation has not finished; run cleanup if it was interrupt ...
- Linux学习笔记:shell
目录 通配符 特殊符号 变量 环境变量 默认变量 shell script case if for until while function 本文更新于2019-08-23. 通配符 *:0个至无穷多 ...
- 《基于TCP交换的电路交换与分组交换融合方法》读书笔记
简介 在论文<Is IP going to take over the world (of communications)?>中作者对IP相关的一些说法(假设)提出了质疑,并得出结论:虽然 ...
- Buffer与Cache的理解
Linux与Windows内存Linux系统的内存机制是优先使用物理内存,当物理内存还有空闲时,Linux系统是不会释放内存的,即使使用过内存的程序已经被关闭,这部分内存就用来做缓存了.换句话说,即使 ...