移動端 - 局部滾動

xiongzenghui 發布于2019-08-23 18:12 / 1138人閱讀

摘要：對話內容超過一屏，使對話內容上移，當然是改變父元素的值啦用戶可以上下滑動對話框，就類似于滾動條效果，設置父元素高度并且，子元素高度即可。遇到問題局部滾動效果，以上想法設置父元素高度并且在端可以正常滑動，但在移動端失效。

起因

我司最近在做一個H5,有一個模擬微信對話框的需求，具體需求如下。

對話內容固定，但需要一句一句顯示

對話內容超過一屏后，需要使對話內容上移

對話內容結束后，用戶可以上下滑動對話框，查看詳細對話內容

圖中灰色頭像表示獲取的用戶頭像

示例：請看第二屏

初步設想

使對話內容一句一句顯示，腦子里立馬閃現出setInterval定時器。

對話內容超過一屏，使對話內容上移，當然是改變父元素的scrollTop值啦

用戶可以上下滑動對話框，就類似于滾動條效果，設置父元素高度并且 overflow:hidden，子元素高度auto即可。

獲取用戶頭像，這個薛微復雜，留做下一篇文章。

遇到問題

局部滾動效果，以上想法（設置父元素高度并且 overflow:hidden）在PC端可以正常滑動，但 在移動端失效。
這種寫法，多帶帶寫沒有問題，但是IOS端出現卡頓現象，可以添加 -webkit-overflow-scrolling:touch; 解決。

但是，我司的H5頁面使用的swiper制作，大概是這個有一些影響，用戶滑動屏幕首先觸發了swiper的事件。（僅做設想，后續做進一步實踐）

于是在網上查了幾番，有以下幾種解決方法

用戶在解發touchmove事件時，改變元素的transform值

使用iscroll.js

使用swiper

改變元素的transform值

改變元素的transform值，需要判斷用戶的滑動方向。
判斷滑動方向時，先了解兩個事件

touchstart :用戶手指按在屏幕上時觸發

touchmove：用戶滑動屏幕時觸發

了解了這兩個事件，我們可以在用戶觸發touchstart事件時，記錄手指位置，在touchmove記錄獲取手指最后停留的位置
判斷最后停留位置 - 初始位置= pageY- startY = 即用戶滑動方向

(pageY-startY)為正數時，說明用戶向下滑動;為負數時，說明用戶向上滑動。

$(".message-wrapper").on("touchstart", function (e) {
     startY = e.type === "touchmove" ? e.targetTouches[0].pageY : e.pageY;
})
$(".message-wrapper").on("touchmove", function (e) {
     pageY = e.type === "touchmove" ? e.targetTouches[0].pageY : e.pageY;
     
})

使用iscroll.js

網上有很多關于iscroll的資料，但是我查了一下官方的github,最近的更新在5年前，果斷不敢用~

使用swiper

查了一番，swiper里的 swiper-scrollbar可以完美的實現這一功能，多帶帶寫這一功能，在真機測試沒有問題。然后移入到我們的項目中。出現以下幾個問題

局部滾動后的slide元素不顯示 分析原因

出現這個問題的原因，是由于我司的H5項目也是由swiper制作，這意味著每一屏就相當于一個slide,當添加用swiper完成的局部滾動時，會造成后面父元素的slide元素不顯示。

解決辦法

這涉及到多個swiper嵌套使用的問題，具體修改如下：

當頁面存在多個swiper，初始化時，盡量避免使用一樣的類名，如 .swiper-container,每個swiper有它多帶帶的類名

         //父元素swiper
          
                
                
                     //子元素swiper
                      
                        
                      
                   
                
                
          
        


//-------------------------------------------------------------swiper初始化

如果類名分開，父元素后續slide元素依然無法顯示
將子元素的初始化，寫在父元素初始化之前,加載時，優先初始化子元素swiper

   
    //初始化子swiper
      var scrollSwiper = new Swiper(".message-warp", {
            observer: true,
            observeParents: false,
            scrollbar: ".swiper-scrollbar",
            direction: "vertical",
            slidesPerView: "auto",
            mousewheelControl: true,
            freeMode: true,
     })

   var swiper = new Swiper(".main-swiper", {
        direction: "vertical",
        touchRatio: 0.5,
        loop: false,
        on: {
            init: function () {
                swiperAnimate(this);
            },
            slideChangeTransitionEnd: function (e) {               
                swiperAnimate(this)
            }
        }
    });

以上方法都不能使后續元素顯示

swiper運行時，會先給元素添加visiblity:hidden;使元素隱藏，只給當前頁的visiblity設置為visible;而swiper中，改元素顯示狀態的依據就是swiper-slide-active;

swiper默認給當前的slide添加swiper-slide-active類名。當頁面中存在swiper嵌套時，父元素的當前slide會添加該類名，子元素的當前slide也會添加該類名。

這樣當用戶滑出父元素的當前slide時父元素的swiper-slide-active被移除，而子元素的swiper-slide-active類名并沒有移除，造成swiper混亂，所以父元素后續slide的元素會無法顯示

解決辦法

我的做法是在父元素切換slide后，判斷頁面中swiper-slide-active的個數，如果存在一個以上，則說明子元素的類名沒有移除。
手動將子元素的swiper-slide-active類名移除即可。
暫時還沒有想到更好的方法，如果你有更好的方法，歡迎一起討論。

    if ($(".swiper-slide-active").length == 2) {
        $(".message-slide").removeClass("swiper-slide-active")
    }

云服務器 GPU云服務器 js移動端向上滾動刷新數據移動端海外移動端移動端推送

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104844.html

原生js滾動到底部加載數據和下拉刷新 Scrollload

摘要：原文地址初衷如今移動端站點越來越多，滾動到底部加載數據和下拉刷新的需求非常的常見，即使現在很多站點也會有這樣的需求，比如百度首頁就有。原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md 初衷如今移動端站點越來越多，滾動到底部加載數據和下拉刷新的需求非常的常見，即使現在很多pc站點也會有這樣的需求，比如百度首頁...

HollisChuang 2019-08-20 13:34 評論0 收藏0
移動端滾動研究

摘要：還會有一個性能上的問題就是當頁面的列表過長，元素過多時，在模擬滾動，下拉刷新這段時間內，頁面也會有卡頓現象，這里采取了一個優化策略即列表較長時數量較多時，在觸發下拉刷新的時機時將頁面視窗之外的元素隱藏或者存放在里面。移動web滾動問題在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的div內觸發，將該div設置成overflow:scroll/auto;來形成div內部的...

ghnor 2019-08-23 14:32 評論0 收藏0
解決多場景/多端的頁面滾動縮放組件-ScrollerJS

摘要：使用方法首先看一下簡易第一步，實例化滾動對象代碼其實還是蠻簡單的，首先我們初始化一個滾動的實例，構造函數擁有兩個參數，第一個是一個負責管理頁面滾動時需要處理事務的函數，這個函數接受三個參數，分別表示當前頁面左移，向上移，縮放比信息。 ScrollerJS是什么 ScrollerJS是用于純邏輯的滾動縮放組件，它獨立于任何指定的渲染或者事件系統。上面是官方定義的，我再說一下我對這個庫的理...

fuyi501 2019-08-23 12:34 評論0 收藏0
用Vue開發仿旅游站webapp項目總結（上）

摘要：寫著寫著發現會寫不少內容全部寫在一篇文章里感覺太多了不方便看，所以分為上下篇吧下篇寫完啦，感興趣的朋友可以繼續關注開發仿旅游站項目總結下溫馨提示此文章，僅是做完項目后的個人覺得可以總結下來的操作思路，接觸不久的朋友應該會有收獲。寫著寫著發現會寫不少內容... 全部寫在一篇文章里感覺太多了不方便看，所以分為上下篇吧...下篇寫完啦，感興趣的朋友可以繼續關注 => Vue開發仿旅游站we...

church 2019-08-23 13:11 評論0 收藏0
用Vue開發仿旅游站webapp項目總結（上）

摘要：寫著寫著發現會寫不少內容全部寫在一篇文章里感覺太多了不方便看，所以分為上下篇吧下篇寫完啦，感興趣的朋友可以繼續關注開發仿旅游站項目總結下溫馨提示此文章，僅是做完項目后的個人覺得可以總結下來的操作思路，接觸不久的朋友應該會有收獲。寫著寫著發現會寫不少內容... 全部寫在一篇文章里感覺太多了不方便看，所以分為上下篇吧...下篇寫完啦，感興趣的朋友可以繼續關注 => Vue開發仿旅游站we...

masturbator 2019-08-29 17:16 評論0 收藏0