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

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

更多精彩，请关注订阅号：韶华随机