[はじめに]
プロジェクトリストページで遭遇VUEのプロセスを使用する場合は、いくつかの詳細は、後にコードを最適化するために、ここにまとめるために、注意を払う必要があります。次のように：
1. LoadMore成分中のミント-UI上のプルダウンリフレッシュは、LACは、より多くの方法をアップロード誘発しないことがあります。スムーズな転がりはありませんIOS。
詳細にリスト（要求されたデータ・ページのリスト）2.、リターン、リストページには、前のスクロール位置を覚えて、以前のデータを覚えていますが、別のページからのリストページにする、あなたはそれを更新する必要があります。（詩：VUE以降のリリースが自動的に記録され、処理されたキープアライブページのスクロールバーになりそうです）
結果を達成するために[]が必要
このデモでは、次のような効果を実現します。
アイデアの[]実現
LoadMoreアセンブリ1.ミント-UI、ドロップダウンリフレッシュタイマー遅延シミュレーション。
2.キープアライブページBが真である、このページのルーティングを決定するためのフックメソッドは、ページがCから返された場合、リストページに入り、そこからページがあり、そしてBは、データをリフレッシュしませんしましょう。それは他のページから来ましたBは、データを更新してみましょう。Cならば、> Cプロセス - - > B - これが可能に> B、そしてBは、他のページには、それがネイティブアプリケーションページジャンプのようなものだ、Bにデータをリロードします、変更されません。
[詳細]対処する必要があります
loadMoreの注目で使用される成分の1ミント-UI番号。
2.別のページに基づいてデータをリフレッシュ活性化しました。
3.ページにvuexストレージのB、Cのページを使用して、スクロールバーの位置に。
[関連コード】
loadmore成分1.ミント-UIそれ以外の場合は時々始め下にスライドさせないで、時には複数の負荷方法を誘発しない（問題を摺動し、その外層をラップする必要があり、その高さを設定します）複数のトリガ方法をロードします。次のように：
<DIV CLASS = "コンテンツ"スタイル= "{高さ：contentH + 'ピクセル'}" REF = "ラッパー" @スクロール= "scrollEvent（）">
<Loadmoreクラス= "LoadMore"：トップメソッド= "loadTop" ：ボトム方式は、= "loadBottom" REF = "loadmore">
"dataArrayで（インデックス、elemは）" <DIV CLASS = "項目" V-用= @ = "によってitemClick（インデックス、elemは）">をクリックし
<Pクラス= "ITEMP">アイテム_ {{索引}} </ P>
</ div>
</ Loadmore>
</ div>
その後、変数の割り当てを次のcontentH
マウントされた（）{
//ミント・組立に必要なパッケージloadmoreのUI、およびコンテンツは、より多くのようにロードする前に、小包の高さよりも高い場合には、指定された高さにラップ層
this.contentH = document.documentElement.clientHeight -この$。 。refs.wrapper.getBoundingClientRect（）トップ;
}
アナログの更新はドロップダウン次のように：
// 下拉刷新
loadTop() {
let that = this;
setTimeout(function() {
that.dataArray = [0, 1, 2, 3, 4, 5];
that.$refs.loadmore.onTopLoaded();
}, 1500);
},
// 上拉加载更多
loadBottom() {
let that = this;
setTimeout(function() {
let tempArray = [];
let lastItem = that.dataArray[that.dataArray.length - 1];
for (let i = 0; i < 6; i ++) {
that.dataArray.push(i + lastItem + 1);
}
that.$refs.loadmore.onBottomLoaded();
}, 1500);
}
2. 在 B 的路由钩子中用变量记录来自哪个页面。
beforeRouteEnter(to, from, next) {
if (from.name != 'C') {
isFromC = false;
} else {
isFromC = true;
}
next();
}
3. vuex中记录 B 页面滚动条位置
const state = {
pageYOffset: 0
}
const mutations = {
setPageYOffset(state, val) {
state.pageYOffset = val;
}
}
export default new Vuex.Store({
state, mutations
})
4. 进入C页面前，保存滚动条位置
itemClick(item, index) { // 进入C页面
// 保存滚动条位置
this.$store.commit('setPageYOffset', this.$refs.wrapper.scrollTop);
this.$router.push({
name: 'C',
params: {
item: item,
index: index
}
});
}
5. 在activated方法中处理滚动条位置及数据初始化。
activated() {
if (isFromC) { // 来自C页面
this.$refs.wrapper.scrollTop = this.$store.state.pageYOffset;
} else { // 滚动到最顶，数据初始化
this.$refs.wrapper.scrollTop = 0;
this.dataArray = [0, 1, 2, 3, 4, 5];
}
}
6. 在ios上滑动不流畅样式设置处理，即 -webkit-overflow-scrolling: touch
.content {
マージントップ：49px;
オーバーフロー-Y：スクロール。
-webkit-オーバーフロースクロール：タッチ。
}
[拡張]
キープアライブ経路を使用して、他のより複雑なページバッファを処理することができ、ページバッファ情報は一時的なもの、および、ルーティングロジックフック関数処理データによりクリアすることができます。これは、もはやデータ処理周りのページにジャンプするので1ページのアプリケーションを心配しません。すなわち、同様のデータは、プッシュの状態をシミュレートし、ページ変更ネイティブアプリを開くことができます。
【demo地址】
https://github.com/LiJinShi/vue_keepAlive