去年年底自己搭了一个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 }) } } }) } }
使用之前大家可以先了解一下
想安装此插件，请点击这里，记得给个star哟
注意: 使用上述代码,vuex必需为3.1.0版本。因为subscribeAction在3.1.0才新增的
路由切换动画 + keep alive 动态管理缓存组件
之前采用的是全局设置路由切换动画，但是体验效果不是很好，特别是返回列表页，页面会引起回弹，页面切换时会有暂时的空白。
未改造前的，也是参考别人的做法
## app.vue <transition :name="transitionName"> <keep-alive :include="data"> <router-view></router-view> </keep-alive> </transition> computed: { // 数据存放在vuex里面 ...mapState({ data: state => { return state.global.data } }) }, methods: { // 设置Keep_alive路由 setKeep_alive (to) { if (to.meta.keepAlive) { this.$store.dispatch({ type: 'global/setData', payload: to.name }) } } }, watch: { '$route' (to, from) { // 此时从from页面跳转到to页面 this.setKeep_alive(to) const routeDeep = ['https://www.jb51.net/', '/list', '/detail', '/reservation', '/addCars'] const toDepth = routeDeep.indexOf(to.path) const fromDepth = routeDeep.indexOf(from.path) if (!from.name) { this.transitionName = 'fold' return } this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right' } },
## router.js scrollBehavior (to, from, savedPosition) { // keep-alive 返回缓存页面后记录浏览位置 if (savedPosition && to.meta.keepAlive) { return savedPosition } // 异步滚动操作 return new Promise((resolve) => { setTimeout(() => { resolve({ x: 0, y: 1 }) }, 0) }) },
两个问题
列表页滑动到一定位置后跳转到详情页，返回列表页页面回弹
原因：原生滚动条的位置是不变的，使用scrollBehavior，根据上述代码可知滚动条会有一个闪烁的过程先置顶，然后滚动到上次保留的位置。
页面切换时会有暂时的空白,过渡不正常。
改造后
## app.vue <keep-alive :include="data"> <router-view></router-view> </keep-alive> computed: { // 数据存放在vuex里面 ...mapState({ data: state => { return state.global.data } }) }, methods: { // 设置Keep_alive路由 setKeep_alive (to) { if (to.meta.keepAlive) { this.$store.dispatch({ type: 'global/setData', payload: to.name }) } } }, watch: { '$route' (to, from) { // 此时从from页面跳转到to页面 this.setKeep_alive(to) } },
list.vue
<Scroll ref="scroll" :scrollbar="scrollbar" :probeType="3" :pullDownRefresh="pullDownRefresh" :pullUpLoad="true" @pullingDown="onRefresh" @scroll="scroll" @pullingUp="onLoad" > <div> </div> </Scroll>
1.采用better-scroll后,第一个问题可以直接解决。而且不用设置scrollBehavior，不懂可以去看better-scroll
2.给页面CSS添加设置“position:absolute;”，此时页面脱离文档流，不占空间，这样就不会把下一页挤下去，完成平滑过渡。使用better-scroll给页面CSS添加设置“position:fixed;”。
如果页面布局里面有用到flex布局，一定要给flex组件加一个position为absolute或者fixed的div。
上述代码中已有keep alive 动态管理缓存路由的思路。
better-scroll与vue的最佳实践