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