国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動端 - 局部滾動

xiongzenghui / 1150人閱讀

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

起因

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

對話內(nèi)容固定，但需要一句一句顯示

對話內(nèi)容超過一屏后，需要使對話內(nèi)容上移

對話內(nèi)容結(jié)束后，用戶可以上下滑動對話框，查看詳細對話內(nèi)容

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

示例： 請看第二屏

初步設(shè)想

使對話內(nèi)容一句一句顯示，腦子里立馬閃現(xiàn)出setInterval定時器。

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

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

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

遇到問題

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

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

于是在網(wǎng)上查了幾番，有以下幾種解決方法

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

使用iscroll.js

使用swiper

改變元素的transform值

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

touchstart :用戶手指按在屏幕上時觸發(fā)

touchmove：用戶滑動屏幕時觸發(fā)

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

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

$(".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

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

使用swiper

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

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

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

解決辦法

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

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

        
 //父元素swiper
          

                

                

                    
 //子元素swiper
                      

                        

                      

                   

                

                

          

        



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

如果類名分開，父元素后續(xù)slide元素依然無法顯示
將子元素的初始化，寫在父元素初始化之前,加載時，優(yōu)先初始化子元素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)
            }
        }
    });

以上方法都不能使后續(xù) 元素顯示

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

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

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

解決辦法

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104844.html

相關(guān)文章

  • 原生js滾動到底部加載數(shù)據(jù)和下拉刷新 Scrollload

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

    HollisChuang 評論0 收藏0

  • 移動端滾動研究

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

    ghnor 評論0 收藏0

  • 解決多場景/多端的頁面滾動縮放組件-ScrollerJS

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

    fuyi501 評論0 收藏0

  • 用Vue開發(fā)仿旅游站webapp項目總結(jié) （上）

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

    church 評論0 收藏0

  • 用Vue開發(fā)仿旅游站webapp項目總結(jié) （上）

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

    masturbator 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<