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

更多精彩，請關注訂閱號：韶華隨機