vue中多路由表头吸顶实现的几种布局方式


Posted in Javascript onApril 12, 2019

vue项目多路由表头吸顶实现的几种布局方式

因为项目较大,有五个界面,每个界面有四个子组件,每个子组件都有一个table表格,需求是每个界面的每个table滚动到顶端表头吸顶,所以尝试用vux做这种需求,

一、先聊js。

A.首先在vux可以这样设置。

1.在state文件中设置状态。

techo:{
 partsFixed:false,
 repairFixed:false,
 mateFixed:false,
 outRepairFixed:false
 }//吸顶状态

2.在action中commit状态。

export const setTecho=function ({commit},data) {
 commit(types.UPDATETECHO, {data})
}

3.mutations中更新状态。

[types.UPDATETECHO](state,{data}){
 const {name,type,other} =data;
 for (let i in state.techo) {
  if(i===name){
  state.techo[i]=other;
  state.techo[name]=type;
  }
 }
 }//更新吸顶状态

B.在界面中我们可以这样操作。

1、在methods中我们可以定义一个回调函数。

partScroll(){
 const evalPart = this.$refs.evalPart,//evalPart为表格对象
   evalTopTitle = document.querySelector('.fixedNav');//evalTopTitle为导航栏
 if(evalPart){
  let evalPartBottom = evalPart.getBoundingClientRect().bottom,
   evalPartTop = evalPart.getBoundingClientRect().top,
   evalTopTitleHeight = evalTopTitle.getBoundingClientRect().height;
  evalPartTop<=evalTopTitleHeight && evalPartBottom>=evalTopTitleHeight?
  this.$store.dispatch('setTecho',{name:"partsFixed",type:true,other:false})
  :this.$store.dispatch('setTecho',{name:"partsFixed",type:false,other:false});
 }
 },

  如果项目大,最好对函数进行封装放到全局混合。

scrollEvent(evalPart,evalTopTitle,name){
 if(evalPart){//注意一定要对表格对象进行判断,因为表格是动态添加的,可能值为空,会报错。
  let evalPartBottom = evalPart.getBoundingClientRect().bottom,
  evalPartTop = evalPart.getBoundingClientRect().top,
  evalTopTitleHeight = evalTopTitle.getBoundingClientRect().height;
  evalPartTop<=evalTopTitleHeight && evalPartBottom>=evalTopTitleHeight?
  this.$store.dispatch('setTecho',{name,type:true,other:false})
  :this.$store.dispatch('setTecho',{name,type:false,other:false});
 }
 },
partScroll(){
 const evalPart = this.$refs.evalPart,//evalPart为表格对象
  evalTopTitle = document.querySelector('.fixedNav');//evalTopTitle为导航栏
  this.scrollEvent(evalPart,evalTopTitle,'partsFixed')
}

2、在mouted里面进行滚动监听。

mounted(){
 window.addEventListener('scroll',this.partScroll);
}

3、最后记得在destroyed里面进行销毁。

destroyed () {
 window.removeEventListener('scroll', this.partScroll)
}

总结

以上所述是小编给大家介绍的vue中多路由表头吸顶实现的几种布局方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
表单提交验证类
Jul 14 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 #Javascript
如何检查一个对象是否为空
Apr 11 #Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 #Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 #Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 #Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 #Javascript
Vue开发Html5微信公众号的步骤
Apr 11 #Javascript
You might like
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
jQuery中:selected选择器用法实例
2015/01/04 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
js转html实体的方法
2016/09/27 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
运动会入场词50字
2014/02/20 职场文书
国际会计专业求职信
2014/08/04 职场文书
企业挂职心得体会
2014/09/10 职场文书
2014年科研工作总结
2014/12/03 职场文书
走近毛泽东观后感
2015/06/04 职场文书
离职告别感言
2015/08/04 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript