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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php实现文件下载更能介绍
2012/11/23 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
对python 自定义协议的方法详解
2019/02/13 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
平安建设实施方案
2014/03/19 职场文书
租房协议书怎么写
2014/04/10 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
同意报考证明
2015/06/17 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫