@[列表返回|minirefresh|cookie|sessionStorage]
背景
前不久做一个类似电商的h5项目,产品经理有个业务需求:用户在商品列表,点击某一条商品的时候,进入到详情页,从详情页返回的时候,需要定位到刚才点击的位置。
其实,这个场景,基本就是仿照app的用户体验,当列表数据太多,需要上拉加载更多时,而后续加载(如果考虑seo则是从第二页开始,否则就是第一页开始)是通过ajax(或者其他的吧)请求过来,按照web网页来说,点击其中的某一条,就会跳到一个新页面,再返回时,列表相当于刷新,因此,就无法定位到刚才点击的那个位置。这样本来用户逛到第21条记录的时候,查看一下详情,回去,又得从第1条往下拉,体验确实不怎么好。
需求背景大致清楚了,那么我们就着手来实现吧!
步骤分析
- 为了保证返回时,我们还能回到刚才的位置,那么就需要做本地数据存储。[考虑到保证数据和上次用户看到的一致]
- 本地缓存的字段有
页码
、点击的位置(滚动条的位置)
,列表数据
(具体字段,请自行结合实际)进行本地缓存。合理的使用本地缓存数据有cookie、sessionStorage,至于为啥要用两个,可以自行查阅,着重看一下存储大小的限制问题 - 当从详情返回列表时,首先从缓存中取
页码
、点击的位置(滚动条的位置)
,列表数据
,如果有位置、列表数据,则直接将列表数据渲染到页面,并滚动到存储的位置点
此处,安利一个移动端加载更多、下拉刷新的插件minirefresh,感觉很完美的实现了需求
代码一览
cookie的操作
export default {
getCookie(c_name) {
if (document.cookie.length > 0) {
var c_start = document.cookie.indexOf(c_name + "=")
if (c_start != -1) {
c_start = c_start + c_name.length + 1
var c_end = document.cookie.indexOf(";", c_start)
if (c_end == -1) { c_end = document.cookie.length }
return unescape(document.cookie.substring(c_start, c_end))
}
}
return ""
},
// expireHours以分钟为单位
setCookie(c_name, value, c_time) {
this.delCookie(c_name);
var exdate = new Date()
exdate.setTime(exdate.getTime() + c_time * 60 * 60 * 1000)
if(c_time){
document.cookie = c_name + "=" + escape(value) +";expires=" + exdate.toGMTString() ;
}else{
document.cookie = c_name + "=" + escape(value);
}
},
// 删除cookie
delCookie(c_name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = this.getCookie(c_name);
if (cval != null) {
document.cookie = c_name + "=" + cval + ";" + process.env.domain + "expires=" + exp.toGMTString();
}
},
// 获取用户id
getUserId() {
return this.getCookie('userId');
},
// 存放到sessionStorage
setItem(_key, _val) {
sessionStorage.setItem(_key, _val);
},
// 从sessionStorage中取
getItem(_key) {
return sessionStorage.getItem(_key);
}
}
核心业务脚本
<div id="homeRefresh" class="home minirefresh-wrap">
<div class="minirefresh-scroll">
……
</div>
</div>
let home_list = cookie.getItem('home_list');
let home_page = cookie.getCookie('home_page');
let home_scrollTop = cookie.getCookie('home_scrollTop');
var _this = this;
this.homeRefresh = new MiniRefresh({
container: '#homeRefresh',
// isUseBodyScroll:true,
isScrollBar: false,
down: {
isAuto: false,
dampRateBegin: 1,
callback: function() {
// 下拉事件
// alert("下拉");
_this.curPageIndex = 1;
_this.getBannerData();
_this.getData();
}
},
up: {
isAuto: false,
// loadFull:{
// isEnable:true
// },
// offset:600,
callback: function() {
_this.curPageIndex += 1;
// alert("上啦"+_this.curPageIndex);
if (_this.curPageIndex <= _this.totalPages) {
// _this.homeRefresh.endUpLoading(false);
console.log('自动加载', 'asfsafksa');
// alert('up');
_this.getData();
} else {
_this.homeRefresh.endUpLoading(true);
}
}
}
});
if (home_scrollTop && home_list) {
// alert('home_scrollTop1111');
this.proList = JSON.parse(home_list);
this.curPageIndex = parseInt(home_page);
setTimeout(() => {
this.homeRefresh.scrollTo(home_scrollTop, process.env.scroll_time);
cookie.delCookie('home_scrollTop');
}, 100)
} else {
this.homeRefresh.triggerUpLoading();
}
// 获取商品列表数据
async getData() {
let list2 = await Api.proList({ "pageIndex": this.curPageIndex, "pageSize": this.curPageSize });
if (list2.status) {
this.totalPages = list2.totalPages;
// alert('getData+this.totalPages');
if (this.curPageIndex == 1) {
this.proList = list2.data;
} else {
this.proList = this.proList.concat(list2.data)
}
if (list2.totalPages <= this.curPageIndex) {
this.homeRefresh.endUpLoading(true);
} else {
this.homeRefresh.endUpLoading(false);
}
if (this.curPageIndex == 1) {
this.homeRefresh.endDownLoading();
}
} else {
this.homeRefresh.endDownLoading();
this.homeRefresh.endUpLoading(false);
}
},
更多精彩,请关注订阅号:韶华随机