app活動頁面上的痛點

標籤：interval   需要   禁用   highlight   延遲   定時器   其他   定時   img   

app項目上需要做一個小的活動，先看下頁面配置

需求是這5個板塊逐個展示，展示一塊的時候，頁面整體向上滾動一定的距離。

剛開始考慮的時候，是準備依賴css3屬性的transition實現的，包括順序延遲都沒有任何問題，可是等到真正實現的時候，發現無法監聽每一個模組展示之後，實現捲軸的滾動。（或者是因為我沒有考慮到怎麼監聽吧）

然後剩下的一條路就是setInterval和setTimeout了，首先想到的是setInterval，因為有多個模組嘛，逐一展示，自然是開啟間隔定時器（setInterval）了，執行中，發現兩個問題，一個是無法在合適的時候，關閉定時器了；第二個問題是，直接操作捲軸滾動的話，沒有緩動效果，看起來特別生硬的感覺。

第一個問題，很容易解決了，替換成延時定時器setTimeout，每一個模組延遲不一樣的時間，就解決了逐一展示的問題。

操作捲軸，需要緩動效果，就比較坑了。

討論了很久，發現，如果直接操作頁面捲軸的話，是沒有辦法實現緩動的。不得已，轉換思路：

緩動，只有運動函數和css的animation，transition才有easing 函式，那麼就是定方案了。

採用運動函數的話，肯定需要定位，那麼頁面的內建的捲軸可能就沒法使用了。

css方案的話，需要根據子項目的滾動，來實作類別似於整個document.body的向上滾動，也是一大痛點。

最終決定採用css方案，配合延遲定時器，每展示一個模組，類似於document.body的盒模型，我採用了一個.main整個包裹了所有元素，所以我這裡向上滑動的就是.main，

.main向上滑動的距離等於每個模組需要滑動的距離乘以當前元素的序號。

$(‘.main‘).css({    ‘transform‘: ‘-webkit-translateY(-‘+ 80 * i+ ‘px)‘,    ‘transform‘: ‘translateY(-‘+ 80 * i+ ‘px)‘,    ‘transition‘: ‘-webkit-transform 800ms ease-in-out‘,    ‘transition‘: ‘transform 800ms ease-in-out‘});

當所有模組都展示之後，這裡其實採用了一個偷懶的方法，實在是沒有找到怎麼監聽最後一個模組已經展示完全的方案。

setTimeout(function(){    $(document.body).click();}, 5200);

　　其實就是再開啟一個延遲定時器，在5200ms之後，觸發其他需要的事件。

由於需要一個觸發點，所以在5200ms之後，用js類比了一次頁面點擊事件，在這個點擊事件內部實現所有需要完成的工作。

$(document.body).on(‘click‘, function(){    $(‘.main‘).css({        ‘transform‘: ‘-webkit-translateY(0)‘,         ‘transform‘: ‘translateY(0)‘,         ‘transition‘: ‘-webkit-transform 0ms steps(1)‘,         ‘transition‘: ‘transform 0ms steps(1)‘    });    $(‘.content‘).scrollTop(320);});

　　為了不影響頁面捲軸的滑動，必須將向上的位移重設為0， 並且偷偷的把捲軸滾動到當前的位置。

這裡transition的使用有一個技巧，從當前的位移，回到0，必須一步完成，不能讓使用者從效果上看出來頁面在來復原動，所以用到了steps(1)的屬性，而且在0ms之內。

到這裡，基本完成需求了，但是當我在操作頁面的時候，又發現了一點問題，就是當模組還沒有完全展示的時候，使用者滑動了頁面，結果看起來就不那麼友好了。

所以採用了模組沒有展示的時候，禁用觸屏滑動的事件，等到頁面類比點擊事件的時候，再放開觸屏滾動的事件。

$(document.body).on(‘touchmove.move‘,function(e){    e.preventDefault();    e.stopPropagation();});

　放開觸屏事件：　

$(document.body).off(‘touchmove.move‘)

　　基本完成需求了。叫做打完收工。

app活動頁面上的痛點