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代码: ...
随机推荐
- MySQL主从双向同步
最近部署测试环境,涉及到MySQL数据库主从双向同步的部署,记录一下部署过程,正常读写都发生在主库,从库作为备选数据库(热备份),当主库发生异常,数据库自动切换到从库,这里面是怎么监控数据库异常并触发 ...
- Scrapy教程——搭建环境、创建项目、爬取内容、保存文件
1.创建项目 在开始爬取之前,您必须创建一个新的Scrapy项目.进入您打算存储代码的目录中,运行新建命令. 例如,我需要在D:\00Coding\Python\scrapy目录下存放该项目,打开命令 ...
- 使用div 的 contenteditable属性,实现输入编辑,输入 "#" 出现下拉选择
文章原文:https://www.cnblogs.com/yalong/p/11883585.html 演示效果如下: 具体代码可以看 https://github.com/YalongYan/e ...
- 一百一十八:CMS系统之短信验证码加密和js代码混淆
前面的方法存在安全隐患,只要知道发送短信验证码的接口就可以无限触发发送短信验证码 改用post请求,在前端加scrf_token验证,后面需要使用到md5加密,引入md5 from apps.form ...
- MYSQL理论学习
最近在复习数据库相关的知识,主要是以“SQL必知必会”这本书为参考,结合网上相关博客,记录学习的要点.本篇博客会持续更新,便于以后复习. 参考博客:http://blog4jimmy.com/2017 ...
- lumen添加中间件实现cookie自动加密解密
在项目根路径下执行命令:安装illuminate/cookie包 1.composer require illuminate/cookie 2.找到同版本的laravel下的\vendor\larav ...
- 静态web页面与动态web页面的区别
一.静态web页面 在静态web程序中,客户端使用web浏览器经过网络连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务区我现在需要得到哪个页面,所有的请求交给web服务器,之后 ...
- mysql数据库之视图、触发器
视图 概念:通过查询得到的一张虚拟表,然后保存下来就是视图 视图的好处:如果要频繁使用某张虚拟表,那么就可以保存为视图,以后查找就直接拿这个视图就会非常方便 视图语法规则: create view t ...
- Prefix and Suffix Search
Given many words, words[i] has weight i. Design a class WordFilter that supports one function, WordF ...
- Design HashMap
Design a HashMap without using any built-in hash table libraries. To be specific, your design should ...