移动端Vue界面缓存处理

大家可以看到当重新进入列表页数据进行了刷新这明显不符合需求

查百度问同事知道了一个东西叫keep-alive于是决定使用这个内置组件试试

然后吧发现问题确实能够得到结局但是出了个新问题如图:

问题1:界面虽然被缓存但是当退出到前一个页面再进入的时候界面还是被缓存状态,我觉得这是不合理的

问题2:被缓存的界面从上个页面再次进入时动画效果不对

基于这两个问题我也查了一些资料和博客,也总结了第二套方案

这个rank是用来判断当前组件所在的级别

比如A组件->B组件 ->C组件,那么A的rank为1,B的rank为2,C的rank为3,

在beforeRouteLeave中

这个貌似能解决问题,但是!!!

问题1: 这个返回动画就是不对(在浏览器可能看不出啥问题,在真机很明显)因为这个框架是前端给的动画我也不会弄如果能解决跳转动画问题,我觉得这个方案基本可以符合要求如果有大佬可以解决,方便的话指导下小弟而且能解决这个动画问题后面也不用看了

问题二:有的时候会出现缓存了上一次的bug(也不知道咋回事出现的还挺频繁)

在这里就是我自己总结的一个方案虽然能完美解决这些问题不过对开发不友好,维护成本太高不建议使用(如果实在没办法的话)

首先在vuex中定义需要缓存的界面的数据(先测试的滑动,所以分开写的可以只写一个data)

先说下高度的滑动吧这个滑动的高度也是需要保存的界面中沃使用cube-ui的scroll组件

给data增加一个scrollHeight属性缓存界面高度还有需要缓存的数据model

当界面滑动停止调用scrollend方法对scrollHeight进行赋值

每次进入界面即在created 函数中取出缓存的高度,如果有高度那么让它自动滑动并重新给scrollHeight进行赋值

这边是我封装的一个js实现是这样的

这样就可以保证滑动的缓存(data与高度类似)

这是data的js

当界面进行跳转对组件的rank进行判断如下:

而在进入的时候

vue3中无法使用 vue-seamless-scroll，作者还没有发布vue3版本的

github issues中有提到一个解决方法，是某个作者推荐的封装方法，但是我更倾向于使用js版的seamless-scroll作为临时替代方案。

npm install seamscroll --save

SeamlessScrollvue: 可以直接拷贝

使用：

注意：如果多个滚动 dataid 需要保证唯一性，可以用Mathrandom()等方式去生成

写下记得更加深刻！！！

1、在appvue 判断是否用pc打开，如果是将 html的字体设置55px，当然移动端的单位都是使用rem的前提。

2、因为pc的web滚动条在各个浏览器是不一样，比如：google和火狐还有ie，这样滚动条可能会造成布局乱掉，所以特意找了下大佬们的滚动条插件，有  vue-gemini-scrollbar  和  vuescroll   个人感觉对vue还是特友好的，安装如下

使用就要看你的需求，因为我是全局都要使用所以在mainjs引入

然后在组件使用方式是，在需要滚动的区域下包上

在加的时候可以看下外层是否有一个overflow:auto的css属性；把这个属性调成overflow:hidden看下原来的滚动条是否隐藏了，如果是说明这就是你要叫上<GeminiScrollbar>的位置。  vuescroll 也是类似的。暂时测试i9+和火狐，360是可以的

还有就是我发现$('html')css('font-size', '50px')这句好像没有生效，所以我就在indexhtml加上了font-size:54px !important;

最后就能完美适配。

以上就是关于移动端Vue界面缓存处理全部的内容，包括:移动端Vue界面缓存处理、vue3 无缝滚动 seamless-scroll、vue 在网页打开适配移动页面大小等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！