基于vue的UI框架ydui中的楼层跳跃scrolltab问题解决

资料链接 scrolltab

实现楼层点击切换

需求

实现点击左侧一级，呈现右侧二三级的数据，要求需要很顺畅，不能卡顿现象

常规实现

实现：遍历出需要一级的数据，通过点击一级将id传给二三级的数据接口，创建出空数组，通过创建销毁的过程不断将二三级的数据添加到空数组中
问题：此时会出现很卡顿现在，数据一直在加载中，但是数据接口请求很快，而前端渲染很慢现象。
网友解决方法：图片懒加载，虚拟列表

优化

问题发现：
- 在整个ui插件中可以看到，里面是for循环嵌套循环的，故我们创建的空数组，会出现点击一级，将空数组的数据添加到每一级里面，故一级如果有n个，那么空数组的数据就会同时在n个中出现，同时渲染出来，导致延迟
- 有图片的地方需要做懒加载处理
- 右侧如果滑动过快产生的问题
- 数据请求n遍后，是否考虑做缓存处理，减少多次请求
代码实现讲解

change(index) {console.log('ScrollTab：---> index：' + index);this.activeIndex = index;if(index<6){//楼层的高度的索引，避免选中的一级没有在可视区域document.querySelector('.yd-scrolltab-nav').scrollTop = 0;} else {document.querySelector('.yd-scrolltab-nav').scrollTop = (index-2)*50;        }if(JSON.parse(sessionStorage.getItem('JsonArrs'))!=null){ //判断本地缓存中是否存在这个if(JSON.parse(sessionStorage.getItem('JsonArrs'))[index].childer!=''){  //根据本地缓存中查看二三级的数组有没添加进去} else {var id = this.classifyList[index].id;this._twoclassify(id,index);}} else {var id = this.classifyList[index].id;this._twoclassify(id,index);} },_firstclassify(id,index){cate_list({id: id}).then(res => {if(res.code=='200'){this.classifyList = res.data; //将一级数据先添加到空数组中// console.log(JSON.stringify(this.classifyList));for(var i = 0;i<this.classifyList.length;i++){this.classifyList[i]['childer'] = ''}this._twoclassify(res.data[index].id,index) //请求二三级的数据}})},_twoclassify(id,index){this.childer = [];this.$dialog.loading.open('加载中');cate2_list({id: id}).then(res => {if(res.code=='200'){this.$dialog.loading.close();this.childer = res.data; //得到二三级的数据this.JsonArr[index] = res.data; //组装成带key的数组数据childerthis.classifyList[index]['childer'] =JSON.parse( JSON.stringify(res.data)); //在一级的数据基础上动态添加新的数组对象sessionStorage.setItem('JsonArrs',JSON.stringify(this.classifyList));//在值放到sessionStorage中（需要进行字符串转换，不然取不到数据）this.JsonclassifyList = JSON.parse(sessionStorage.getItem('JsonArrs')) //转换回去，拿这个数据进行for遍历（重组后的数据）}})},

代码重点

将原数据动态添加到JsonArr中，构建成带key的数组数据this.JsonArr[index] = res.data
在原来的数组中动态添加childer进去到数组中
this.classifyList[index]['childer'] =JSON.parse(JSON.stringify(res.data))
重新构成2需要的数组，则可以进行遍历处理

sessionStorage.setItem('JsonArrs',JSON.stringify(this.classifyList));
this.JsonclassifyList = JSON.parse(sessionStorage.getItem('JsonArrs')); //新的数组

基于vue的UI框架ydui中的楼层跳跃scrolltab问题解决相关推荐

【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录. 官网定义:Element,一套为开发者.设计师和产品经理 ...
【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
今晚看了一下基于vuejs的ui框架iview,感觉UI挺好看的,那么在vue项目中应该如何使用iview呢?以下做简单的记录. 首先安装iview: $ npm install iview --sa ...
基于vue的UI框架集锦(移动端+pc端)
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档在线预览 2.vux 基于WeUI和Vu ...
基于Vue前端UI框架比较
Vue3相对于vue2的优缺点优点: 性能提升,主要体现在打包体积(减少了40%左右),渲染速度(快了55%),更新速度(100%)及内存使用(减少了50%)几方面. 由于增加了compositio ...
【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
11个基于vue的UI框架
Element UI Element UI 来自中国,由与 Mint UI 相同的开发者所创建.Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electro ...
VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
2018年流行的vue前端UI框架
2018年九个很受欢迎的vue前端UI框架作者: 祈澈菇凉原文: https://blog.csdn.net/qq_36538012/article/details/82152052 最近在逛各大 ...
vue前端UI框架整理
整理的vue前端UI框架. PC端: 1.Elementi:一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库. 2.iView:一套基于 Vue.js 的开源 UI 组件库,主 ...

基于vue的UI框架ydui中的楼层跳跃scrolltab问题解决

实现楼层点击切换

需求

常规实现

优化

代码重点

基于vue的UI框架ydui中的楼层跳跃scrolltab问题解决相关推荐

最新文章

热门文章