关于浏览器左右滑动翻页与页面中左右滑动冲突的问题

最近做了一个手机端的网站，用到轮播图（可以左右滑动切换上一张或下一张），发现与浏览器左右滑动前进后退发送冲突，导致轮播图无法手动切换。于是开始寻找解决方法：

第一种：
document.addEventListener('touchmove',function(event){
	event.preventDefault();
},false);

这种方法是直接禁用浏览器的滑动事件，禁止浏览器左右滑动实现前进后退，可以解决大多数浏览器的问题，不足点是用户体验偏差，如果你用的是搜狗浏览器或者小米手机自带的浏览器，这种方法不起作用。但是如果你用的是 百度浏览器  ，这种方法会导致整个页面无法滑动，只能看到可视区域的内容。所有直接这样写是存在问题的。

第二种：
$('.slideshowBox').each(function(index, el) {
	el.addEventListener('touchmove', function (event) {
		event.preventDefault();
	}, false);
});

slideshowBox是你需要手动滑动的父类，禁止当前区域的浏览器默认事件不会影响浏览器的左右滑动前进后退功能，而且所有浏览器均适配，包括上面说到的第一种方法不适用的三款浏览器。

一个业务问题 由于加载的数据过大  之前用Swiper组件一次性加载所有  导致安卓低端手机及苹果内核性能低下导致闪退

自己根据网上的代码再自己优化下写了个组件, 能够监听用户左右滑动的事件.  自己再通过按需加载,减少数据一次加载过多

<template>
  <div class="slide" ref='slide' @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="{transform: translateX}">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'slide',
    data() {
      return {
        startX: 0, //开始触摸的位置
        endX: 0, //结束触摸的位置
        disX: 0, //移动距离
        lastX: 0, //上一次X坐标
        lastY: 0, //上一次Y坐标
        translateX: 'translateX(0px)'
      }
    },
    methods: {
      touchStart: function (ev) {
        ev = ev || event;
        // console.log(ev.targetTouches);
        // console.log(ev.changedTouches);
        if (ev.touches.length == 1) { //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
          this.startX = this.lastX = ev.touches[0].clientX; // 记录开始位置
          this.lastY = ev.touches[0].clientY;
        }
      },
      touchMove: function (ev) {
        ev = ev || event;
        let slideWidth = this.$refs.slide.offsetWidth; //$refs 减少获取dom节点的消耗
        // console.log(ev.targetTouches);
        // console.log(ev.changedTouches);
        if (ev.touches.length == 1) {
          // 实时的滑动的距离-起始位置=实时移动的位置
          this.disX = this.lastX - this.startX;
          // 计算两次移动距离Y>X就不启动滑动动画,防止误滑
          var disX = ev.touches[0].clientX - this.lastX
          var disY = ev.touches[0].clientY - this.lastY
          // console.log(disX, disY);
          if (Math.abs(disX) > Math.abs(disY)) {
            this.translateX = 'translateX(' + this.disX + 'px)';
          }
          // 记录一次坐标值
          this.lastX = ev.touches[0].clientX;
          this.lastY = ev.touches[0].clientY;
        }
      },
      touchEnd: function (ev) {
        ev = ev || event;
        let slideWidth = this.$refs.slide.offsetWidth;
        if (ev.changedTouches.length == 1) {
          let endX = ev.changedTouches[0].clientX;
          this.disX = endX - this.startX;
          // console.log(this.disX, 'this.disX')
          // console.log((slideWidth / 2), 'slideWidth/2');
          this.translateX = 'translateX(0px)';
          // 只有滑动大于一半距离才触发
          if (Math.abs(this.disX) > (slideWidth / 2)) {
            if (this.disX < 0) {
              console.log('左滑');
              this.$emit('change', 'left')
            } else {
              console.log('右滑');
              this.$emit('change', 'right')
            }
          }
        }
      }
    }
  }

</script>


 

滑动事件左右滑动：

function slideEvent(id) {
    var UlWidth = 0;
    var touchStart, touchEnd, moveLength, startML, maxML;
    var $shop2 = $('#' + id);
    $shop2.find('li').each(function(){
        UlWidth += $(this).outerWidth();
    })
    $shop2.width(UlWidth);
    maxML = UlWidth - $(window).width();
    if(maxML > 0){
        $shop2.bind('touchstart', function(e){
            touchStart = e.originalEvent.targetTouches[0].pageX;
            startML = $shop2.css('margin-left');
        }).bind('touchmove', function(e){
            touchEnd = e.originalEvent.targetTouches[0].pageX;
            moveLength = touchEnd - touchStart + parseInt(startML);
            $shop2.css('margin-left', moveLength)
        }).bind('touchend', function(){
            if(moveLength > 0){
                moveLength = 0;
            }else if(moveLength < -maxML){
                moveLength = -maxML;
            }
            $shop2.animate({'marginLeft': moveLength}, 200);
        })
    }
}
slideEvent('shop2');


注：id 为绑定的 唯一标识如：

<div id="shop2"></div>

最近在做一个二手校园交易平台的毕设，想达到仿咸鱼的tab效果。目前效果：



但是咸鱼的是不可以左右滑动的，怎么禁止ViewPager左右滑动呢？

建一个ViewPager的子类，重写它的 onInterceptTouchEvent 和 onTouchEvent方法：

package com.up.uwei.shshop.view;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

public class NoSwipeViewPager extends ViewPager {
    private boolean canSwipe = true;
    public NoSwipeViewPager(Context context, AttributeSet attributeSet){
        super(context, attributeSet);
    }
    public void setCanSwipe(boolean canSwipe)
    {
        this.canSwipe = canSwipe;
    }
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return canSwipe && super.onTouchEvent(ev);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return canSwipe && super.onInterceptTouchEvent(ev);
    }
}


接着在布局里使用NoSwipeViewPager：



然后在Activity里通过findById拿到我们的NoSwipeViewPAger，接着调用：





然后运行结果：



ok，已经不能左右滑动，只能通过替补tab来控制，

但是有一个问题，每次切换fragment都有一个动画，比如从 “导航” 到 “我的”，中间有动画，不想要怎么办？

答：

mViewPager.setCurrentItem(3, false);



最后运行结果：



嘿嘿，over....