摘要：需求由于某企业对该产品的使用逐渐增加的手机端，而浏览较少，而该系统针对多是端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。将原组件形成的树形多选控件，转换为移动端。
前言
项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetimepicker+ztree开发的偏pc端的数据决策系统。
需求由于某企业对该产品的使用逐渐增加的手机端，而pc浏览较少，而该系统针对多是pc端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。其一期需求大致如下：
将原左侧导航转移到下方，形成更适合移动端的系统。
将原ztree组件形成的树形多选控件，转换为移动端。
具体设计由于改项目已经完成，而开发周期有限，整体基于bootstrap进行优化，我在其中担任的角色是前端开发工程师兼ui设计，这个项目，没有产品、没有ui、没有测试，两个人，一个前端，一个后端，完成所有优化工作。责任巨大。
移动端导航改造
原导航效果图如图所示：
这一效果的导航细看并没有考虑移动端，完全是pc端的风格，而且具备前端缓存的功能，之前也一直在思考前端缓存的问题，怎么样才能去提升系统性能的提升，并没有明确的方式方法可以去做，看到这一个应用在管理系统内的前端缓存，知道了一种教好的方式去做一些改动不频繁，的前端页面缓存，减轻服务器的压力和负担。
此种前端缓存做法流程如下：
导航处，跳转到对应页面，通过读取data-toggle属性，将相关页面以div的形式添加到内容页面
每一个不同的页面，在页面上只要通过导航请求得到的html以及数据，都在页面上，分块，并且提供了一个页签的形式，便于下一次，切换不同的页面，其达到的效果如下图所示
加载过第一次之后，其余每一次点击切换页签所获得的页面都是页面本身已经存在的，只需要控制其显隐就达到了前端缓存的效果。
为了保留前端缓存且能有移动端的效果，对前端导航进行了改造，具体改造步骤多且繁琐，在此就不详细介绍了，直接贴出改造后的效果图如下：
树形结构文件优化
原版
原版这一个树结构多选地区选择方式，完全不符合移动端的风格，采用的ztree控件的样式，在移动端并不能有好的体验，
第二版
第二版是在做的时候考虑的需求有着多选的需求，我想不到在移动端有什么好的方式去技能满足移动端ue，又能满足多选需求，充分发挥脑细胞，在ztree的基础上，进行样式的更改得到第二个版本。
第三版
第三版降低需求，要求只能单选，故选用mobileselect插件来进行制作，具体代码实现如下：
var mobileSelect4 = new MobileSelect({
trigger: ".sel-area",
title: "地区选择",
wheels: [
{data:[
{
id:"1",
value:"全部",
childs:[ {id:"0",value:"请选择"},
{id:"1",value:"未分配片区",childs:[ {id:"0",value:"请选择"},
{id:"1",value:"阿瑞包装产品子公司"},
{id:"2",value:"阿瑞包装产品子公司"}
]},
{id:"1",value:"西南片区",childs:[
{id:"0",value:"请选择"},
{id:"1",value:"重庆地区"},
{id:"2",value:"成都地区"}
]},
]
}
]}
],
position:[0],
callback:function(indexArr, data){
console.log(data); //返回选中的json数据
}
});
这一款插件，我在使用时，在以div开头的页面模板中直接引入css，和js，实现出来的效果会有问题，必须将引入css和js的代码放入head标签中才可行
结语
这一次移动端优化，对我而言收获的是前端缓存的部分，为我自己的前进道路打开了新的天窗，
同时对组件的封装有了新的认识，以后会试着自己封装属于自己的组件。共勉。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113891.html
摘要：需求由于某企业对该产品的使用逐渐增加的手机端，而浏览较少，而该系统针对多是端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。将原组件形成的树形多选控件，转换为移动端。 前言 项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetime...
摘要：需求由于某企业对该产品的使用逐渐增加的手机端，而浏览较少，而该系统针对多是端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。将原组件形成的树形多选控件，转换为移动端。 前言 项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetime...
摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...
摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...
阅读 3672·2021-11-18 13:19
阅读 1088·2021-10-11 10:58
阅读 3262·2019-08-29 16:39
阅读 3107·2019-08-26 12:08
阅读 1995·2019-08-26 11:33
阅读 2435·2019-08-23 18:30
阅读 1275·2019-08-23 18:21
阅读 2496·2019-08-23 18:18
