个人中心 左侧有menu树结构,右侧是功能区
当点击menu-item的时候右侧是不同的功能区
请问: 在点击menu-item的时候 是发生页面跳转呢?还是整个个人中心都是单页面? 如果单页面的话,首次加载个人中心页面时 会不会导致 加载速度过慢?
或者还有其他的办法?
看情况看需求,可以尝试下用react.js或者angular.js写
基本上面的各位已经说了解决方法(三种方法),我来给你总结下;
方法一:做成多个页面,布局一样,不同的只是右侧功能区
方法二:做成一个页面,右侧功能区采用异步加载
方法三:做成一个页面,在右侧功能区,你可以使用iframe,根据不同的导航,iframe链接不同的界面
不过我一般是做成多个页面,将左边公共的部分独立出来,然后在个人中心中每个页面的左侧引用导航就可以了
右边写一个div,然后用js load的方式加载不同的页面填充进div
采用iframe
可以做成单页面。加载速度过慢的问题是指文件过大么?可以g一下webpack代码分割
在个人中心页面来说,一般采用多页面加载的方式;
常用iframe来处理页面跳转,单页面对于功能复杂的个人中心来说不太适用,不止初始加载的问题还有不同功能交叉的问题。
这样看承载的内容有多少,业务逻辑是不是负载。少就单页,多就多页。多页的话设计好一个框架,动态局部更新内容就行了。
iframe最简单
可以多页面,这样好调整。不用写在一起。
可以采用异步加载,不必在首屏加载时加载所有页
左边导航一般数据少。可以搞成公共区,或者左边iframe 右边也iframe src