[Introduction]
When using vue process encountered in the project list page, there are some details need to pay attention, to sum up here in order to optimize the code later. as follows:
1. Use the pull-down refresh on mint-ui in LoadMore components, may not trigger the LAC upload more ways. There ios not smooth rolling.
2. From the list into the details (a list of data pages requested), when the return, list page to remember scroll position before, remember its previous data, but from a different page into the list page, you need to refresh it. (Ps: it seems vue later releases will be automatically recorded and processed keepAlive page scroll bar)
[] The need to achieve results
This demo will achieve the following effects.
[] Realization of ideas
1. mint-ui in LoadMore assembly, the drop-down refresh timer delay simulation.
2. Set the keepAlive page B is true, the hook method to determine the routing of this page is the page from which to enter the list page, if the page is returned from C, then let B does not refresh the data; it came from the other pages let B refresh the data. This allows A -> B -> C process, if C -> B, then B remains unchanged, the other page will reload the data into the B, it's like a native application page jump.
[Details] need to be addressed
1. mint-ui number of components used in loadMore attention.
2. activated refresh the data based on a different page.
3. The scroll bar position using vuex storage b c page into the page.
[Relevant code]
1. mint-ui in loadmore components need to wrap its outer layer, and its height to be set, otherwise it will slide problems (sometimes not trigger more load method, sometimes not slide into the bottom began load more trigger method). as follows:
<div class="content" :style="{height: contentH + 'px'}" ref="wrapper" @scroll="scrollEvent()">
<Loadmore class="LoadMore" :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore">
<div class="item" v-for="(index, elem) in dataArray" @click="itemClick(index, elem)">
<p class="itemP">item_{{index}}</p>
</div>
</Loadmore>
</div>
Then follows a variable assignment contentH
mounted() {
// mint-ui loadmore assembly required package, and the content higher than the height of the parcel before loading more so when the package is assigned to a layer height
this.contentH = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
}
Analog Refresh drop-down as follows:
// Pull down to refresh
loadTop() {
let that = this;
setTimeout(function() {
that.dataArray = [0, 1, 2, 3, 4, 5];
that.$refs.loadmore.onTopLoaded();
}, 1500);
},
// more uploaded on Raja
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. The method of processing a scroll bar activated position and initialization data.
activated() {
if (isFromC) {// page from C
this.$refs.wrapper.scrollTop = this.$store.state.pageYOffset;
} Else {// Top of the scroll, data initialization
this.$refs.wrapper.scrollTop = 0;
this.dataArray = [0, 1, 2, 3, 4, 5];
}
}
6. The process does not slide smoothly on the style setting ios, i.e. -webkit-overflow-scrolling: touch
.content {
margin-top: 49px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
【extend】
Using the keepAlive route, can also handle other more complex the page buffer, the page buffer information can be temporary, and then cleared by the routing logic hook function processing data. This will no longer worry about the one-page application because the page jump around the data processing. I.e., similar data can simulate the state of push and pop the page change native app.
[Demo Institute Add]
https://github.com/LiJinShi/vue_keepAlive