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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
vue-hook-form使用详解
Apr 07 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
layui数据表格跨行自动合并的例子
Sep 02 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
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php常用正则函数实例小结
2016/12/29 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
python从入门到精通(DAY 2)
2015/12/20 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
python中删除某个元素的方法解析
2019/11/05 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Python with标签使用方法解析
2020/01/17 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
init进程的作用
2015/08/20 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
大学毕业后的十年规划
2014/01/07 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
股东协议书范本2016
2016/03/21 职场文书
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技
python绘制云雨图raincloud plot
2022/08/05 Python