公司要求使用vue開發一款混合app,去年自學了一段時間,有前端給搭的框子,也上手體驗了一次,中間遇到好多問題也都可以查資料解決,唯獨這個vue的緩存界面功能一直沒有好的方法,今年自己上手一個項目,實在受不了這坑爹的效果,所以著手研究研究,我現在使用的框架是我們前端搭的,我對前端也不是很了解,如有更好的思路請多多指教,我只是把我遇到的問題和解決方法寫出來做個總結
問題
大家可以看到當重新進入列表頁數據進行了刷新這明顯不符合需求
如何解決
查百度問同事知道了一個東西叫keep-alive于是決定使用這個內置組件試試.
方案一
對所需要的組件添加keepAlive
{ path: '/messageList',
name: 'messageList',
meta: {
title: '消息列表',
keepAlive:true,
},
component: messageList
}
然后吧發現問題確實能夠得到結局但是出了個新問題如圖:
問題1:界面雖然被緩存但是當退出到前一個頁面再進入的時候界面還是被緩存狀態,我覺得這是不合理的.
問題2:被緩存的界面從上個頁面再次進入時動畫效果不對.
基于這兩個問題我也查了一些資料和博客,也總結了第二套方案
方案二
思路:動態的改變keepAlive的值即在組件beforeRouteLeave中判斷當頁面離開的時候該進行緩存還是不緩存.這里給meta再增加一個rank(用啥字段都行)屬性
{ path: '/messageList',
name: 'messageList',
meta: {
title: '消息列表',
rank: 1.5,
keepAlive:true,
},
component: messageList
}
這個rank是用來判斷當前組件所在的級別.
比如A組件->B組件 ->C組件,那么A的rank為1,B的rank為2,C的rank為3,
在beforeRouteLeave中
beforeRouteLeave: function(to, from, next) {
if (to.meta.rank < from.meta.rank) {
from.meta.keepAlive = false;//這表示要到上一個界面把當前的keepAlive變為false
} else {
from.meta.keepAlive = true;//進入下一個界面需要緩存
}
next();
}
這個貌似能解決問題,但是!!!
問題1: 這個返回動畫就是不對...(圖片在瀏覽器可能看不出啥問題,在真機很明顯)因為這個框架是前端給的動畫我也不會弄...如果能解決跳轉動畫問題,我覺得這個方案基本可以符合要求..如果有大佬可以解決,方便的話指導下小弟.而且能解決這個動畫問題后面也不用看了...
問題二:有的時候會出現緩存了上一次的bug(也不知道咋回事...出現的還挺頻繁..).
說到這給大家推薦個博客,寫的很詳細奈何小弟能力有限看的不是太懂... (這是地址) 我試了半天沒啥效果但給我的方案提供了很多好的思路.
方案三
在這里就是我自己總結的一個方案..雖然能完美解決這些問題不過對開發不友好,維護成本太高..不建議使用(如果實在沒辦法的話)
思路:放棄使用keepAlive,將需要進行緩存的界面(基本都需要)的數據使用vuex進行保存(還有界面的滑動高度.開始做的時候先弄的高度,后來發現可以把高度和數據寫到一起,但趕時間就沒有改).根據rank對界面進行判斷,是加載緩存數據還是新數據,以達到所需要的效果.這個方法能完美解決問題.但比較難維護.
首先在vuex中定義需要緩存的界面的數據(先測試的滑動,所以分開寫的可以只寫一個data)
indexScrollTop: {
workList: 0, //首頁待辦滾動
}, //所有滾動界面滑動高度存儲
listData: {
workList: {}, //首頁待辦數據
}, //所有滾動界面數據存儲
先說下高度的滑動吧這個滑動的高度也是需要保存的.界面中沃使用cube-ui的scroll組件
<cube-scroll
ref="scroll"
:data="model.list"
:scroll-events="['scroll-end']"
:options="options"
@pulling-down="onPullingDown"
@pulling-up="onPullingUp"
@scroll-end="scrollend"
>
給data增加一個scrollHeight屬性緩存界面高度.還有需要緩存的數據model
data() {
return :
model:{},
scrollHeight: 0, //記錄滑動高度
},
當界面滑動停止調用scrollend方法對scrollHeight進行賦值
methods: {
scrollend(poy) {
this.scrollHeight = poy.y;
},
}
每次進入界面即在created 函數中取出緩存的高度,如果有高度那么讓它自動滑動.并重新給scrollHeight進行賦值.
created() {
this.scrollHeight = this.scrollTool.getScrollTop(this, "workList");
},
這邊是我封裝的一個js..實現是這樣的
function scrollTop(vc, title) {
var indexDic = vc.$store.getters.getIndexScrollTop;//取出組件緩存的高度
setTimeout(() => {
vc.$refs.scroll.scrollTo(0, indexDic[title], 0);//滑動到指定位置
}, 10);
return indexDic[title];
}
function setScrollTop(vm, title, height) {//保存緩存高度
var indexDic = vm.$store.getters.getIndexScrollTop;
indexDic[title] = height;
vm.$store.dispatch("setIndexScrollTop", indexDic);
}
var t = {
getScrollTop: function(vc, title) {
return scrollTop(vc, title)
},
setScrollTop: function(vm, title, height) {
return setScrollTop(vm, title, height)
}
}
export default t
這樣就可以保證滑動的緩存(data與高度類似).
這是data的js
function getData(vc, title) {
var indexDic = vc.$store.getters.getListData;
return indexDic[title];
}
function setData(vm, title, data) {
var indexDic = vm.$store.getters.getListData;
indexDic[title] = data;
vm.$store.dispatch("setListData", indexDic);
}
var t = {
getData: function(vc, title) {
return getData(vc, title)
},
setData: function(vm, title, data) {
return setData(vm, title, data)
}
}
export default t
其實需要緩存的高度完全可以放到data中成為data的一個屬性,當時因為特殊情況沒有數據進行測試,所以先對所有界面進行高度緩存.做完發現完全寫一個就可以...而且這些key也就是title.在定義的時候也可以直接使用組件的名稱.這樣在使用key的時候就可以直接用this.$route.name(復制起來更方便 哈哈....)
當界面進行跳轉對組件的rank進行判斷如下:
beforeRouteLeave: function(to, from, next) {
if (to.meta.rank < from.meta.rank) {//回退將數據清空
this.cacheData.setData(this, "workList", {});
this.scrollTool.setScrollTop(this, "workList", 0);
} else {//前進將數據緩存
this.cacheData.setData(this, "workList", this.model);
this.scrollTool.setScrollTop(this, "workList", this.scrollHeight);
}
next();
},
而在進入的時候
beforeRouteEnter(to, from, next) {
next(vm => {
if (to.meta.rank < from.meta.rank) {//如果從rank高的地方進入加載緩存數據
vm.model = vm.cacheData.getData(vm, "workList");
} else {//加載新數據
vm.toast.show();
vm.getData();
}
});
},
