成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端 - 局部滾動(dòng)

xiongzenghui / 1152人閱讀

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

起因

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

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

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

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

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

示例： 請(qǐng)看第二屏

初步設(shè)想

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

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

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

獲取用戶頭像，這個(gè)薛微復(fù)雜，留做下一篇文章。

遇到問題

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

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

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

用戶在解發(fā)touchmove事件時(shí)，改變?cè)氐膖ransform值

使用iscroll.js

使用swiper

改變?cè)氐膖ransform值

改變?cè)氐膖ransform值，需要判斷用戶的滑動(dòng)方向。
判斷滑動(dòng)方向時(shí)，先了解兩個(gè)事件

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

touchmove：用戶滑動(dòng)屏幕時(shí)觸發(fā)

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

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

$(".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可以完美的實(shí)現(xiàn)這一功能，多帶帶寫這一功能，在真機(jī)測(cè)試沒有問題。然后移入到我們的項(xiàng)目中。出現(xiàn)以下幾個(gè)問題

局部滾動(dòng)后的slide元素不顯示 分析原因

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

解決辦法

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

當(dāng)頁面存在多個(gè)swiper，初始化時(shí)，盡量避免使用一樣的類名，如 .swiper-container,每個(gè)swiper有它多帶帶的類名

        
 //父元素swiper
          

                

                

                    
 //子元素swiper
                      

                        

                      

                   

                

                

          

        



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

如果類名分開，父元素后續(xù)slide元素依然無法顯示
將子元素的初始化，寫在父元素初始化之前,加載時(shí)，優(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運(yùn)行時(shí)，會(huì)先給元素添加visiblity:hidden;使元素隱藏，只給當(dāng)前頁的visiblity設(shè)置為visible;而swiper中，改元素顯示狀態(tài)的依據(jù)就是swiper-slide-active;

swiper默認(rèn)給當(dāng)前的slide添加swiper-slide-active類名。當(dāng)頁面中存在swiper嵌套時(shí)，父元素的當(dāng)前slide會(huì)添加該類名，子元素的當(dāng)前slide也會(huì)添加該類名。

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

解決辦法

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104844.html

相關(guān)文章

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

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

    HollisChuang 評(píng)論0 收藏0

  • 移動(dòng)端滾動(dòng)研究

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

    ghnor 評(píng)論0 收藏0

  • 解決多場(chǎng)景/多端的頁面滾動(dòng)縮放組件-ScrollerJS

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

    fuyi501 評(píng)論0 收藏0

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

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

    church 評(píng)論0 收藏0

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

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

    masturbator 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<