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 相关文章推荐
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 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
无线电的诞生过程
2021/03/01 无线电
基于mysql的论坛(7)
2006/10/09 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
新闻内页-JS分页
2006/06/07 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
详解javascript void(0)
2020/07/13 Javascript
详解Python命令行解析工具Argparse
2016/04/20 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python numpy中cumsum的用法详解
2019/10/17 Python
django实现用户注册实例讲解
2019/10/30 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
大学英语专业求职信
2014/06/21 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
护理专业自我评价
2015/03/11 职场文书
兴趣班停课通知
2015/04/24 职场文书