better-scroll與UC瀏覽器滑動翻頁沖突的js解決方案

anquan 發布于2019-08-23 13:57 / 1856人閱讀

摘要：問題最近在用寫端項目時發現個問題，的橫向滑動和瀏覽器的橫向滑動翻頁效果出現了沖突。思路我們雖然不能禁止瀏覽器的跳轉操作，但是我們可以阻止滑動元素觸發的所有默認事件啊。

問題：

最近在用vue寫m端項目時發現個問題，better-scroll的橫向滑動和UC瀏覽器的橫向滑動翻頁效果出現了沖突。

簡單的說，就是滑動scroll組件的時候也會觸發UC瀏覽器自帶的翻頁效果。

為此在網上找了不少資料，目前網上出現最多的解決方案是使用history.pushState()，使用監聽事件，監聽到跳頁事件(popstate)時，手動填充路徑為當前頁面地址。

示例代碼如下（引用）：

history.pushState(null, null, document.URL);
   window.addEventListener("popstate", function () {
   history.pushState(null, null, document.URL);
   });

但是我個人在使用的時候發現了另外一個問題，這個代碼不太符合我的需求場景，我只需要在scroll橫向滑動禁止翻頁，這個代碼相當于將所有跳頁操作禁止了。

于是我在這個基礎上做了些一點改動，首先監聽滑塊的滑動，然后在滑塊滑動的時候再去調用history.pushState，這樣在scroll滑動的時候就阻止了UC瀏覽器的默認翻頁。但是這樣又引發另外一個問題，瀏覽器history的前進和后退是依靠的是瀏覽歷史的隊列，調用 history.pushState(null, null, document.URL) 就相當于往當前隊列插入了一個當前頁的歷史記錄。這樣的話，每次使用瀏覽器自帶的前進后退功能的時候都需要連續觸發很多次才能跳出當前頁，這樣對于用戶來說顯然是不合理的。

那么，我們現在換一種思路來解決這個問題。

思路：

我們雖然不能禁止瀏覽器的跳轉操作，但是我們可以阻止滑動元素觸發的所有默認事件啊。然后只需要判斷在什么時候去阻止默認事件以及恢復默認事件就好了。然后也不會影響點擊等操作。

代碼（基于vue）：

往滑塊的html結點上掛載觸摸事件

往data上掛載數據

data() {
  return {
    isTouchMove: true,
    startX: 0,
    startY: 0,
    endX: 0,
    endY: 0,
    isPreventDefault:false
  };
}

mounted上掛載觸摸執行事件

methods: {
  touchStart(e){
    // 獲取初始位置
    this.startX = e.touches[0].clientX;
    this.startY = e.touches[0].clientY;
    // 記錄是否進入過touchMove
    this.isTouchMove = true;
  },
  touchMove(e){
    // 如果是UC瀏覽器 并且第一次滑動執行時  
    if (this.isTouchMove && this.isUC()) {
      this.endX = e.touches[0].clientX;
      this.endY = e.touches[0].clientY;
      // 判斷滑動方向  橫向 | 垂直
      if (Math.abs(this.endX - this.startX) > Math.abs(this.endY - this.startY)) {
        // 如果滑動為橫向，那么禁止所有默認事件
        // 必要！否則會影響縱向頁面的滾動
        e.preventDefault()
        // 用來輔助判斷是否已經禁止過默認事件
        this.isPreventDefault = true;
      }
      // 關閉處理邏輯  touchMove連續觸發就沒必要再進來了
      this.isTouchMove = false;
    }
  },
  touchEnd(e){
    // 如果已經禁止過默認事件  那么恢復默認事件
    if(this.isPreventDefault && this.isUC() && e.preventDefault ){
      // 恢復默認事件
      e.preventDefault()
      this.isPreventDefault = false;
    }
  },
  isUC(){
    // 判斷是否UC瀏覽器
    return navigator.appVersion.indexOf("baidubrowser") !== -1
  }
}

注：該代碼沒有兼容ie等其他瀏覽器，如需有需要，請自行兼容。（純手打，與我的原代碼有些微調整，如有問題或者其他建議請留言。）

云服務器 GPU云服務器 js沖突解決方案滑動沖突處理 scrollview滑動沖突 view滑動沖突

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

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

better-scroll筆記

摘要：當設置為會派發一個事件，我們會給派發的參數加一個私有屬性，值為。但是自定義的事件會阻止一些原生組件的行為。安裝npm install better-scroll --save引入import BScroll from better-scroll基礎better-scroll支持多參數配置，可以在初始化的時候傳入第二個參數let scroll = new BScroll(.wrappe...

xcc3641 2019-08-26 10:36 評論0 收藏0
vue 在移動端體驗上的優化解決方案

摘要：去年年底自己搭了一個在移動端的開發框架，感覺體驗不是很好。路由懶加載首頁終于寫完了，以上這些就是我在移動端體驗優化的實戰。去年年底自己搭了一個vue在移動端的開發框架，感覺體驗不是很好。上個星期又要做移動端的項目了。所以我花了兩天時間對之前的那個開發框架做了以下優化自定義vuex-plugins-loading 路由切換動畫 + keep alive 動態管理緩存組件 better-sc...

godlong_X 2019-05-22 11:25 評論0 收藏0
vue全家桶制作一個精致的美團項目

摘要：的組件化功能可謂是它的一大亮點，通過將頁面上某一組件的代碼放入一個的文件中進行管理可以大大提高代碼的維護性。項目中未做移動端適配，在不同屏幕手機上打開，可能用戶體驗會差些一、項目展示： showImg(https://user-gold-cdn.xitu.io/2018/5/18/1637183ad14a696a?w=372&h=791&f=gif&s=2408442); 注意：如果...

NeverSayNever 2019-08-23 14:00 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

wqj97 2019-08-21 17:38 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

FingerLiu 2019-08-01 18:01 評論0 收藏0