vue移动体验优化解决方案详解

去年底在移动端搭建了一个vue的开发框架，感觉体验不是很好。上周我打算再做一次移动项目。因此，我花了两天时间优化了前面的开发框架，如下所示

自定义vuex-plugins-加载路由切换动画保持活跃动态管理缓存组件最佳实践-更好滚动和vue(更好滚动的vue)自定义指令(vue-finger:包括点击、长按、双击、拖拽和移动、多点触摸、滑动、旋转、缩放手势)如何根据情况处理页面顶部路由懒惰

如果在数据加载完成之前每页都显示加载。首先想到的是设置状态，显示和隐藏每个页面的状态。但是冗余代码太多，自己写很烦。在我之前的react项目中，使用了dva，包括之前研究过的dva-loading库，所以我用他的思路自己写了一个vuex-loading。

实现思路：在vuex中注册一个模块来管理加载，通过绑定异步动作将每个动作的加载存储在vuex中，这样我只需要在每个页面的vuex的存储中获取对应的动作加载就可以达到这个目的

# #核心代码store . subscribeaction({在： action之前={if (should effect (action，includes，excludes)){ store.commit({ type :命名空间'/show '，payload: action.type }) })，在： action之后={ if (shouldEffect(action，includes，excludes)){ store.commit({ type :命名空间'/HIDE '，payload: action。type})}}}}}您可以在使用subscribeAction之前了解它。

如果你想安装这个插件，请点击这里，记得给它一颗星

请注意，使用上述代码，vuex必须是3.1.0版。因为在3.1.0中添加了subscribeAction。

路由交换动画保持活动动态管理缓存组件

之前用的是全局路由切换的动画，但是体验效果不是很好，尤其是回到列表页面的时候，页面会反弹，切换页面的时候会出现暂时的空白。

改造前，也是参考别人的做法

# # app . vue transition : name=' transition name '保活：include='data '路由器-视图/路由器-视图/保活/transition computed: { //数据存储在vuex中.map state({ data : state={ return state . global . data } })}，methods : {//set Keep _ alive route set Keep _ alive(to){ if(to。meta.keepalive) {this。$ store . dispatch({ type : ' global/set data '，Payload:to。name})}}}，watch: {'$ route' (to，from){//此时，从from页跳转到to page this。将keep _ alive(to)const route deep=['/'，'/list '，'/detail '，'/reservation '，'/addCars ']const to decth=routedeep . indexof(to . path)const from deep=routedeep . indexof(from . path)if(！from . name){ this . transition name=' fold ' return } this . transition name=to Depth from Depth？fold-left' : 'fold-right' }，## router.jsscrollBehavior (to，from，SavedPosition) {//keep-alive记录浏览位置if(saved position to . meta . keep alive){ return saved position }//异步滚动操作返回new Promise((resolve))={ settimeout(()={ resolve({ x 3360 0 0，y: 1})}，0)})，两个问题

列表页面滑动到某个位置后，跳转到详细信息页面，返回列表页面进行反弹

原因：原滚动条位置不变。使用scrollBehavior，根据上面的代码，可以知道滚动条会有一个闪烁的过程，先到顶部，然后滚动到最后一个保留的位置。

切换页面时会出现临时空白，过渡不正常。

经过改造，

# # app . vuekeep-alive : include=' data ' router-view/router-view/keep-alivecomputer : {//数据存储在vuex中.map state({ data : state={ return state . global . data } })}，methods : {//set Keep _ alive route set Keep _ alive(to){ if(to。meta.keepalive) {this。$ store . dispatch({ type : ' global/set data '，Payload: to。name})}}}，watch: {'$ route' (to，from){//从from页跳转到to page this。设置keep _ alive (to)}}，list.vue。

scroll ref=' scroll ' class=' scroll-home ' : scroll bar=' scroll bar ' : probe type=' 3 ' : pull down refresh=' pull down refresh ' : pull pload=' true ' @ pu lingdown=' onrelfresh ' @ scroll=' scroll ' @ pull up=' onload ' div class=' contant view '/div/scroll 1。有了better-scroll，第一个问题可以直接解决。你不需要设置滚动行为，如果你不知道，你可以去看看更好的滚动。

2.添加设置“位置：绝对值；”到页面CSS此时页面与文档流分离，不占用空间，这样下一页就不会被下推，顺利过渡就完成了。使用better-scroll添加设置“位置：固定到页面CSS。

如果页面布局中使用了flex布局，请确保在flex组件中添加具有绝对或固定位置的div。

在上面的代码中，有保持活动以动态管理缓存路由的想法。

更好滚动和vue的最佳实践

我之前在一篇文章中看到BetterScroll可能是最好的移动滚动插件，所以这次想试试。滴滴开源cube-ui组件库中使用的大多数滑动组件都是基于Better Scroll的。体验一下感觉很好。为什么不使用cube？因为我个人觉得主题颜色有点难看。因此，我计划打包一个基于better-scroll的vue版本的scroll组件。不说那么多，马上上头：

我想用更好的还有一个原因——卷轴。我想自定义上下动画。

要查看演示和源代码，请点击这里。记得给星星

自定义指令手指

包括点击、长按、双击、拖放、多点触摸、滑动、旋转和缩放手势

我这边的这篇文章是基于别人的演示。在这些说明中，你可以用移动手势做很多你想做的事情。在后续工作中，我将继续迭代这些指令，并开发体验接近原生的组件。每个人都应该关注我的github

移动终端适配方案

# # rem . jsconst base size=32//set rem function function set rem(){//当前页面宽度相对于750宽度的比例可以根据自己的需要进行修改。const scale=document.documentelement.clientwidth/750//set页面根节点document . document element . style . font size=(base size * math . min(scale，2)' px ' }//initialize setRem()//reset remwindow。onresize=function(){ setrem()} # # main . js import '。/rem '还有最后一步。对于经常写风格的学生来说，把px改成rem是不是很烦？我在这里处理的方法是在项目的根目录下创建一个新的postss . config . js文件。这样，你只需要根据设计风格正常编写px即可。运行项目将自动帮助您切换到rem。

模块。导出={ plugins : { ' autoprefixer ' : { browsers 3360[' Android=4.0 '，' IOs=7']}，' postss-pxtorem ' 3360 {根值： 16，道具列表3360 [']

前面已经提到了虚拟路由器中的滚动行为方法。

## router.jsscrollBehavior (to，from，SavedPosition) {//keep-alive记录浏览位置if(saved position to . meta . keep alive){ return saved position }//异步滚动操作return new Promise((resolve))={ settimeout(()={ resolve({ x : 0 0，y: 1})}，0)})，但我感觉添加页面过渡动画后。页面会反弹。所以我放弃了。不加动画可以考虑。

用了这里的better-scroll以后就不用担心这个问题了。看完better-scroll文档的介绍，你会发现better-scroll是为移动应用而生的。

路由延迟加载

当应用程序打包构建后，JavaScript包会变得非常大，影响页面加载。如果我们能够将不同路由对应的组件划分为不同的代码块，然后在访问路由时加载相应的组件，效率会更高。这是非常重要的，这是路由延迟加载。每个人都应该可以使用官方文件，所以我就不在这里介绍了。

//路由懒得加载const _ import _=file=()=import('。/view/“file”。vue’)route :[{ path 3360 '/'，name3360' home '，component : _ import _(' home/home ')，meta: {title:' home page '，keepAlive: true} }，]终于完成。这些都是我在移动端体验优化的实战。希望能帮到大家。如果以后有什么好的优化方案，我会继续更新。谢谢观看。如果你觉得好，就称赞一下

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。