标签:有意思 UI als detail 点击 ref token 二次 ora
最近在最微信端开发,遇到了一个比较有意思的问题。
1:商品分页列表页
2:商品详情页
需求: 实现当在第N页的列表页,点击ID=Num的商品详情页,跳转到详情页后,再点击返回按钮,依旧返回到列表第N页,并显式的改变ID=Num商品的查看状态
注:详情页与列表页是两个视图页,并且要考虑弱网请求服务端接口比较慢的情况
解决思路:使用sessionStorage
在列表页中将请求服务端接口返回的列表信息使用一个对象dataList存储起来,并记录当前的页码pageIndex,当点击跳转某个商品详情页之前,将dataList与pageIndex存储进sessionStorage中,当第二次返回到列表页后,先去sessionStorage中寻址,看能不能找到缓存的列表信息,如果存在,就直接使用缓存中的dataList填充列表页,同时清除seesionStorage中的listData缓存,如果不存在,就请求服务端接口填充列表
代码如下
1 <script> 2 var pageIndex = 0; 3 var historyData = []; 4 var numID=‘id_0‘; 5 var listData = {}; 6 7 $(function () { 8 if (sessionStorage.getItem("listData")) { 9 state = JSON.parse(sessionStorage.getItem("listData")); 10 sessionStorage.removeItem("listData"); 11 pageIndex = state.pageIndex; 12 numID = state.numID; 13 historyData = state.historyData; 14 for (var i = 0; i < historyData.length; i++) { 15 //填充列表的方法 16 } 17 //改变已查看的商品样式方法 18 } else { 19 LoadData(); 20 } 21 }) 22 23 function LoadData() { 24 $.ajax({ 25 type:‘get‘, 26 async:false, 27 url:currentUrl+‘leave/GetVacationInfos‘, 28 headers: { 29 "Token": token 30 }, 31 data:{ 32 uid:"xxx", 33 pageSize:pageSize, 34 pageIndex:pageIndex, 35 }, 36 dataType:‘json‘, 37 success: function (result) { 38 for (var i = 0; i < result.length; i++) { 39 historyData.push({data:result[i]}); 40 } 41 pageIndex++; 42 } 43 }) 44 } 45 46 47 function ToDetail(id) { 48 state = { pageIndex: pageIndex, numID: numID, historyData: historyData }; 49 sessionStorage.setItem("listData", JSON.stringify(state)); 50 window.location = ‘ToDetail?numID=‘ + id; 51 } 52 </script>
微信 HTML5 实现列表页与详情页无刷新返回 seesionStorage
标签:有意思 UI als detail 点击 ref token 二次 ora
原文地址:http://www.cnblogs.com/Caiyw/p/7131304.html