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代码: ...
随机推荐
- VSCode查询快捷键对应功能技巧
- Linux CentOS 7修改内核启动默认顺序
1.查看系统有几个内核 a.进入grub2.cfg文件中进行查看 b.通过grub界面查看 3.设置默认启动内核 grub2-set-default "内核版本" 配置默认内核4. ...
- JS中map()与forEach()的用法
相同点: 1.都是循环遍历数组中的每一项 2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组) 3.匿名函数中的this都是指向window 4 ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_3-05 服务注册和发现Eureka Server搭建实战
笔记 5.服务注册和发现Eureka Server搭建实战 简介:使用IDEA搭建Eureka服务中心Server端并启动,项目基本骨架介绍 官方文档:http://clou ...
- phpfpm开启pm.status_path配置,查看fpm状态参数
php-fpm配置 pm.status_path = /phpfpm_status nginx配置 server { root /data/www; listen 80; serve ...
- 硬盘相关合集,以及LVM操作实践
1. 机器装有两块硬盘,重装系统只找到一块盘,如何解决? 正常装完系统后,运行: a. lsblk查看硬盘信息,这里可以发现还没有使用的另一块盘. b. fdisk或parted给硬盘分区,取决于硬盘 ...
- NFS PersistentVolume
一.部署nfs服务端: k8s-master 节点上搭建了 NFS 服务器 (1)安装nfs服务: yum install -y nfs-utils rpcbind vim /etc/exports ...
- JS 自定义字典对象
<script type="text/javascript" language="javascript"> //自定义字典对象 function D ...
- 使用TensorFlow训练SSD(二):数据的准备
在进行模型的训练之前,需要准备好相关的数据,相关的数据还需要进行标注.这篇博客将使用labelImg标注工具来进行数据的处理. 首先可从https://github.com/tzutalin/labe ...
- 查找担保圈-step5-比较各组之间的成员,对组的包含性进行查询,具体见程序的注释-版本2
USE [test] GO /****** Object: StoredProcedure [dbo].[p03_get_groupno_e2] Script Date: 2019/7/8 15:01 ...