better-scroll与UC浏览器滑动翻页冲突的js解决方案

anquan 发布于2019-08-23 13:57 / 1815人阅读

摘要：问题最近在用写端项目时发现个问题，的横向滑动和浏览器的横向滑动翻页效果出现了冲突。思路我们虽然不能禁止浏览器的跳转操作，但是我们可以阻止滑动元素触发的所有默认事件啊。

问题：

最近在用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滑动冲突

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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