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

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

整個頁面分4部分：

頂部導航

步數狀態卡片

用戶信息卡片

滾動列表

期望效果：列表滾動到用戶信息卡片消失后，展示另一個吸頂的導航欄。

效果如下：

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

1.適配iPhone X

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

#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.頁面

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

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

一開始，我將better-scroll初始化代碼放在container組件的componentDidMount函數中，但由于初始數據也在這個函數獲取，導致當返回較慢的時候初始化的#wrapper沒有內容，此時需要手動點擊加載更多才展現數據，不符合預期。所以考慮將初始化代碼放到list組件渲染完成之后的componentDidUpdate函數中。list組件渲染完成后，就可以初始化我們的滾動類，這里使用的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函數。這個函數作為props傳到list組件，在list組件的componentDidUpdate鉤子里面執行：
container組件：

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

list 組件：

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

網上很多滾動卡頓的情況，大都是加載數據后沒有執行refresh導致的。同時，加載數據成功后我們需要調用scroll的finishPullUp方法。下次上拉才能繼續加載數據。這樣，每當加載新的數據后，list組件就會執行componentDidUpdate，此時就調用了scroll的finishPullUp、refresh函數，使用起來無比順滑。

和大多數滾動處理一樣，better-scroll的scroll事件也會頻繁觸發，這對性能還是有一定影響的，畢竟我們不需要過于頻繁的執行回調函數。

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也可以：

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

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

list 圖片大小限制，本次由于部分列表item圖片過大，在安卓上導致黑屏的問題出現。排查了很久才發現這個問題。通過在圖片url拼接參數限制大小解決了這個問題。

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