摘要：希望新版兼容和安卓兩端的情況下，無限制的刷新加載數(shù)據(jù)。圖片大小限制，本次由于部分列表圖片過大，在安卓上導(dǎo)致黑屏的問題出現(xiàn)。

近期項(xiàng)目改版，對原有的h5頁面進(jìn)行了重新設(shè)計(jì)，數(shù)據(jù)呈現(xiàn)變成了瀑布流。希望新版兼容ios和安卓兩端的情況下，無限制的刷新加載數(shù)據(jù)。大致效果如下：

整個(gè)頁面分4部分：

頂部導(dǎo)航

步數(shù)狀態(tài)卡片

用戶信息卡片

滾動(dòng)列表

期望效果：列表滾動(dòng)到用戶信息卡片消失后，展示另一個(gè)吸頂?shù)膶?dǎo)航欄。

效果如下：

分析可以發(fā)現(xiàn)，首先我們要做的就是適配iPhone X，其次我們需要監(jiān)聽列表的滾動(dòng)高度，在pc和安卓上監(jiān)聽滾動(dòng)事件是沒有問題的，但是ios上滾動(dòng)過程中不會(huì)觸發(fā)scroll事件，而是滾動(dòng)結(jié)束后會(huì)觸發(fā)onscrollend事件，這就不能滿足實(shí)時(shí)監(jiān)聽高度的要求。經(jīng)過簡單調(diào)研，決定站在巨人的肩膀上，通過iscroll、better-scroll等js庫實(shí)現(xiàn)。這兩個(gè)庫都是解決各種滾動(dòng)兼容的js庫，很多常見的輪播、picker組件都是基于這些庫封裝的。順便說一句，還有個(gè)庫也不錯(cuò)（simulation-scroll-y）

1.適配iPhone X

PhoneX的適配，在iOS 11中采用了viewport-fit的meta標(biāo)簽作為適配方案；viewport-fit的默認(rèn)值是auto。react app的渲染內(nèi)容都在id為root的 div里面。我們給這個(gè)div加上iphoneX的safe-area-inset屬性即可。更多相關(guān)內(nèi)容，這篇文章寫的挺詳細(xì)

#root{
    height:100vh;
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

2.頁面

頁面結(jié)構(gòu)不多說，比較基礎(chǔ)。
div.container-> div#wrapper->div.list->div.list-item
值得注意的是，wrapper需要設(shè)置絕對定位。同時(shí)，通過transform: translateZ(0);開啟硬件加速，瀏覽器在渲染時(shí)會(huì)通過GPU進(jìn)行渲染。有效緩解安卓端滾動(dòng)卡頓的問題，類似的css還有不少，css硬件加速不要濫用，否則會(huì)導(dǎo)致不該使用gpu的layer使用gpu，占用內(nèi)存過高，導(dǎo)致頁面卡頓，甚至黑屏，一般情況下，給不同的硬件加速元素添加一個(gè)不同的z-index屬性可以解決。-webkit-overflow-scrolling: touch使ios滾動(dòng)順滑。
// 初始化BScroll偽代碼，生產(chǎn)慎用：

import BScroll from "better-scroll";
  
this.myScroll = new BScroll("#wrapper", {
              mouseWheel : true,
              // 無需scrollbar
              scrollbar  : false,
              // propType屬性設(shè)置為3在慣性動(dòng)畫期間也觸發(fā)onscroll事件
              probeType  : 3,
              // 允許滾動(dòng)列表內(nèi)可點(diǎn)擊、touch
              click      : true,
              tap        : true,
              // 上拉加載，正值自動(dòng)觸發(fā)加載
              pullUpLoad : {
                  threshold: 50
              }
          });

一開始，我將better-scroll初始化代碼放在container組件的componentDidMount函數(shù)中，但由于初始數(shù)據(jù)也在這個(gè)函數(shù)獲取，導(dǎo)致當(dāng)返回較慢的時(shí)候初始化的#wrapper沒有內(nèi)容，此時(shí)需要手動(dòng)點(diǎn)擊加載更多才展現(xiàn)數(shù)據(jù)，不符合預(yù)期。所以考慮將初始化代碼放到list組件渲染完成之后的componentDidUpdate函數(shù)中。list組件渲染完成后，就可以初始化我們的滾動(dòng)類，這里使用的better-scroll,iscroll使用類似。具體參考上面鏈接。

    #wrapper {
        position:absolute;
        top:0;
        left:0;
        width:100vw;
        overflow:auto;
        height: 100vh;
        transform: translateZ(0);
        z-index: 33;
        -webkit-overflow-scrolling: touch
    }

具體的，可以將初始化代碼放在list組建的container組件的handleScrollRefresh函數(shù)。這個(gè)函數(shù)作為props傳到list組件，在list組件的componentDidUpdate鉤子里面執(zhí)行：
container組件：

handleScrollRefresh () {
      if (this.myScroll) {
          this.myScroll.refresh();
          console.log("refreshed ");
      } else {
          console.log("initialized");
          this.myScroll = new BScroll("#wrapper", {
              ...//初始化參數(shù)
          });
          this.myScroll.on("scroll",this.handleScroll, 10);
          this.myScroll.on("pullingUp", this.loadMore);
      }
  }

list 組件：

componentDidUpdate () {
      if (this.props.onRefresh) {
          this.props.onRefresh();
      }
  }

網(wǎng)上很多滾動(dòng)卡頓的情況，大都是加載數(shù)據(jù)后沒有執(zhí)行refresh導(dǎo)致的。同時(shí)，加載數(shù)據(jù)成功后我們需要調(diào)用scroll的finishPullUp方法。下次上拉才能繼續(xù)加載數(shù)據(jù)。這樣，每當(dāng)加載新的數(shù)據(jù)后，list組件就會(huì)執(zhí)行componentDidUpdate，此時(shí)就調(diào)用了scroll的finishPullUp、refresh函數(shù)，使用起來無比順滑。

和大多數(shù)滾動(dòng)處理一樣，better-scroll的scroll事件也會(huì)頻繁觸發(fā)，這對性能還是有一定影響的，畢竟我們不需要過于頻繁的執(zhí)行回調(diào)函數(shù)。

throttle (func, delay) {
  let lastTime = null;
  return function () {
      let context = this;
      let args = arguments;
      let now = new Date().getTime();
      if (!lastTime || (now - lastTime) > delay) {
          lastTime = now;
          func.apply(context, args);
      }
  };
};

不想寫直接使用lodash也可以：

//不精準(zhǔn)的每秒十次
this.myScroll.on("scroll", this.throttle(this.handleScroll, 100));

函數(shù)綁定，不傳參的情況下在constructor中綁定this。而不是在render中使用this.xxx.bind(this)。

list 圖片大小限制，本次由于部分列表item圖片過大，在安卓上導(dǎo)致黑屏的問題出現(xiàn)。排查了很久才發(fā)現(xiàn)這個(gè)問題。通過在圖片url拼接參數(shù)限制大小解決了這個(gè)問題。

感覺寫得好亂，做事情和寫文章果然是兩回事。。。
有興趣可以訪問：https://3hours.taobao.com/new...
一起來做公益吧！