移动端列表,点击某条记录,进入详情页,返回时定位在刚才点击的位置

@[列表返回|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);
  }
}

核心业务脚本

    
"homeRefresh" class="home minirefresh-wrap">
"minirefresh-scroll"> ……
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);
      }
    },

更多精彩,请关注订阅号:韶华随机

你可能感兴趣的:(web前端技术,缓存)