详解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://www.cdkjz.cn/article/dsdoso.html