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

資訊專欄INFORMATION COLUMN

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

anquan / 1884人閱讀

摘要：?jiǎn)栴}最近在用寫端項(xiàng)目時(shí)發(fā)現(xiàn)個(gè)問題，的橫向滑動(dòng)和瀏覽器的橫向滑動(dòng)翻頁效果出現(xiàn)了沖突。思路我們雖然不能禁止瀏覽器的跳轉(zhuǎn)操作，但是我們可以阻止滑動(dòng)元素觸發(fā)的所有默認(rèn)事件啊。

問題：

最近在用vue寫m端項(xiàng)目時(shí)發(fā)現(xiàn)個(gè)問題，better-scroll的橫向滑動(dòng)和UC瀏覽器的橫向滑動(dòng)翻頁效果出現(xiàn)了沖突。

簡(jiǎn)單的說，就是滑動(dòng)scroll組件的時(shí)候也會(huì)觸發(fā)UC瀏覽器自帶的翻頁效果。

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

示例代碼如下（引用）：

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

但是我個(gè)人在使用的時(shí)候發(fā)現(xiàn)了另外一個(gè)問題，這個(gè)代碼不太符合我的需求場(chǎng)景，我只需要在scroll橫向滑動(dòng)禁止翻頁，這個(gè)代碼相當(dāng)于將所有跳頁操作禁止了。

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

那么，我們現(xiàn)在換一種思路來解決這個(gè)問題。
思路：

我們雖然不能禁止瀏覽器的跳轉(zhuǎn)操作，但是我們可以阻止滑動(dòng)元素觸發(fā)的所有默認(rèn)事件啊。然后只需要判斷在什么時(shí)候去阻止默認(rèn)事件以及恢復(fù)默認(rèn)事件就好了。然后也不會(huì)影響點(diǎn)擊等操作。

代碼（基于vue）：

往滑塊的html結(jié)點(diǎn)上掛載觸摸事件

往data上掛載數(shù)據(jù)

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

mounted上掛載觸摸執(zhí)行事件

methods: {
  touchStart(e){
    // 獲取初始位置
    this.startX = e.touches[0].clientX;
    this.startY = e.touches[0].clientY;
    // 記錄是否進(jìn)入過touchMove
    this.isTouchMove = true;
  },
  touchMove(e){
    // 如果是UC瀏覽器 并且第一次滑動(dòng)執(zhí)行時(shí)  
    if (this.isTouchMove && this.isUC()) {
      this.endX = e.touches[0].clientX;
      this.endY = e.touches[0].clientY;
      // 判斷滑動(dòng)方向  橫向 | 垂直
      if (Math.abs(this.endX - this.startX) > Math.abs(this.endY - this.startY)) {
        // 如果滑動(dòng)為橫向，那么禁止所有默認(rèn)事件
        // 必要！否則會(huì)影響縱向頁面的滾動(dòng)
        e.preventDefault()
        // 用來輔助判斷是否已經(jīng)禁止過默認(rèn)事件
        this.isPreventDefault = true;
      }
      // 關(guān)閉處理邏輯  touchMove連續(xù)觸發(fā)就沒必要再進(jìn)來了
      this.isTouchMove = false;
    }
  },
  touchEnd(e){
    // 如果已經(jīng)禁止過默認(rèn)事件  那么恢復(fù)默認(rèn)事件
    if(this.isPreventDefault && this.isUC() && e.preventDefault ){
      // 恢復(fù)默認(rèn)事件
      e.preventDefault()
      this.isPreventDefault = false;
    }
  },
  isUC(){
    // 判斷是否UC瀏覽器
    return navigator.appVersion.indexOf("baidubrowser") !== -1
  }
}
注：該代碼沒有兼容ie等其他瀏覽器，如需有需要，請(qǐng)自行兼容。（純手打，與我的原代碼有些微調(diào)整，如有問題或者其他建議請(qǐng)留言。）

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

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

相關(guān)文章

  • better-scroll筆記

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

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

  • vue 在移動(dòng)端體驗(yàn)上的優(yōu)化解決方案

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

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

  • vue全家桶制作一個(gè)精致的美團(tuán)項(xiàng)目

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

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

  • vue.js 移動(dòng)端音樂app（一） 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實(shí)現(xiàn) （1）功能 對(duì) better-scroll 插件的基本封裝，實(shí)現(xiàn)移動(dòng)端的滾動(dòng) （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一 （1）取值： 1 滾動(dòng)的時(shí)候會(huì)派發(fā) scroll 事件，會(huì)截流。 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā) scroll 事件，不會(huì)截流。 3 除了實(shí)時(shí)派發(fā) scroll 事件，在 swipe 的情況...

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

  • vue.js 移動(dòng)端音樂app（一） 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實(shí)現(xiàn) （1）功能 對(duì) better-scroll 插件的基本封裝，實(shí)現(xiàn)移動(dòng)端的滾動(dòng) （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一 （1）取值： 1 滾動(dòng)的時(shí)候會(huì)派發(fā) scroll 事件，會(huì)截流。 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā) scroll 事件，不會(huì)截流。 3 除了實(shí)時(shí)派發(fā) scroll 事件，在 swipe 的情況...

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

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

0條評(píng)論

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