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 相关文章推荐
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
Javascript学习指南
Dec 01 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
jquery图片切换实例分析
Apr 15 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
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
Codeigniter检测表单post数据的方法
2015/03/21 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
寒假思想汇报
2014/01/10 职场文书
办理房产过户的委托书
2014/09/14 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL
python井字棋游戏实现人机对战
2022/04/28 Python