详解vue在移动端体验上的优化解决方案-创新互联
去年年底自己搭了一个vue在移动端的开发框架,感觉体验不是很好。上个星期又要做移动端的项目了。所以我花了两天时间对之前的那个开发框架做了以下优化
- 自定义vuex-plugins-loading
- 路由切换动画 + keep alive 动态管理缓存组件
- better-scroll与vue的最佳实践(better-scroll的vue化)
- 自定义指令(vue-finger:包括点击,长按,双击,拖拽移动,多点触控,滑动,旋转,缩放手势)
- 移动端适配方案
- 如何分情况处理页面置顶
- 路由懒加载
自定义 vuex-plugins-loading
如果每个页面在数据加载完成前,展示loading。你首先想到的是每个页面设置状态,show和hide状态。但是这样冗余代码太多了,而且自己写的都烦。我之前的react的项目中用到了dva,其中有dva-loading库,之前就有研究过,所以我就用他的思想,自己写一个vuex-loading。
实现思路:vuex中注册一个管理loading的module,通过绑定异步的action,将每个action的loading存在vuex中,这样我在每个页面只需要在vuex的store中拿相对应的action loading就能达到此目的
## 核心代码 store.subscribeAction({ before: action => { if (shouldEffect(action, includes, excludes)) { store.commit({ type: namespace + '/SHOW', payload: action.type }) } }, after: action => { if (shouldEffect(action, includes, excludes)) { store.commit({ type: namespace + '/HIDE', payload: action.type }) } } }) } }
网页标题:详解vue在移动端体验上的优化解决方案-创新互联
当前地址:http://ybzwz.com/article/dsdoso.html