captain-ui/es/scroll-nav/src/components/swiper.js

有赞vue wap业务组件库

export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "cap-scroll-nav-swiper",
      style: "\n    height: " + _vm.height + "px;\n    padding-top: " + _vm.height + "px;\n  ",
      on: {
        "touchstart": function touchstart($event) {
          $event.preventDefault();
          return _vm.handleTouchStart($event);
        },
        "touchmove": function touchmove($event) {
          $event.preventDefault();
          return _vm.handleTouchMove($event);
        },
        "touchend": function touchend($event) {
          $event.preventDefault();
          return _vm.handleTouchEnd($event);
        },
        "mousedown": function mousedown($event) {
          $event.preventDefault();
          return _vm.handleTouchStart($event);
        },
        "mousemove": function mousemove($event) {
          $event.preventDefault();
          return _vm.handleTouchMove($event);
        },
        "mouseup": function mouseup($event) {
          $event.preventDefault();
          return _vm.handleTouchEnd($event);
        },
        "click": function click(e) {
          return e.preventDefault();
        }
      }
    }, [_c('div', {
      class: _vm.swiperClass,
      style: "\n      width: " + _vm.containerWidth + "px;\n      height: " + _vm.containerHeight + "px;\n      transform: translate3d(0, " + _vm.currentOffset + "px, 0);\n    "
    }, [_vm._t("default")], 2)]);
  },
  name: 'cap-scroll-nav-swiper',
  props: {
    /**
     * 判断是否需要展示动画， pc端展示时可选择关闭动画
     */
    needAnimation: {
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      limitDistance: 0,
      height: 0,
      slideHeight: 220,
      currentPage: 0,
      cachePage: 0,
      dragOffset: 0,
      dragStartY: 0,
      touchstart: false,
      supportTouch: 'ontouchstart' in window
    };
  },
  computed: {
    swiperClass: function swiperClass() {
      return ['cap-scroll-nav-swiper__inner', {
        'cap-scroll-nav-swiper__inner--transition': !this.touchstart
      }];
    },
    currentOffset: function currentOffset() {
      var dragged = this.dragOffset;
      var offset = this.cachePage * this.slideHeight || 0;
      return -(offset + dragged);
    },
    canAdvanceBackward: function canAdvanceBackward() {
      return this.currentPage > 0;
    },
    canAdvanceForward: function canAdvanceForward() {
      return this.currentPage < this.slideCount - 1;
    }
  },
  watch: {
    currentPage: function currentPage(val) {
      this.$emit('pagechange', val);
    }
  },
  mounted: function mounted() {
    this.init();
  },
  methods: {
    init: function init() {
      this.calcSwiperSize();
      this.getSlideCount();
    },
    handleTouchStart: function handleTouchStart(e) {
      if (!this.$isServer && this.needAnimation) {
        this.touchstart = true;
        this.dragStartY = this.supportTouch ? e.changedTouches[0].clientY : e.clientY;
      }
    },
    handleTouchMove: function handleTouchMove(e) {
      if (!this.touchstart) {
        return void 0;
      }

      var minSwipeDistance = 30;
      var eventPointY = this.supportTouch ? e.changedTouches[0].clientY : e.clientY;
      var deltaY = this.dragStartY - eventPointY;
      var deltaPage = Math.ceil(Math.abs(deltaY / this.slideHeight));
      var cacheDis = this.cachePage * this.slideHeight;
      var maxDis; // TODO 添加弹簧动画

      if (deltaY > 0) {
        if (this.canAdvanceForward) {
          this.dragOffset = deltaY;
        } else {
          maxDis = this.height - cacheDis + this.slideHeight;
          this.dragOffset = deltaY >= maxDis ? maxDis : deltaY;
        }
      } else if (deltaY < 0) {
        if (this.canAdvanceBackward) {
          this.dragOffset = deltaY;
        } else {
          maxDis = cacheDis + this.slideHeight;
          this.dragOffset = deltaY < -maxDis ? -maxDis : deltaY;
        }
      }

      if (this.dragOffset > minSwipeDistance && this.canAdvanceForward) {
        this.currentPage = this.cachePage + deltaPage;
      } else if (this.dragOffset < -minSwipeDistance && this.canAdvanceBackward) {
        this.currentPage = this.cachePage - deltaPage;
      }
    },
    handleTouchEnd: function handleTouchEnd(e) {
      this.touchstart = false;
      this.dragOffset = 0;
      this.cachePage = this.currentPage;
    },
    calcSwiperSize: function calcSwiperSize() {
      this.height = document.body.getBoundingClientRect().height / 2;
    },
    getSlideCount: function getSlideCount() {
      this.slideCount = this.$slots.default.filter(function (slot) {
        return slot.tag && slot.tag.indexOf('cap-scroll-nav-slide') > -1;
      }).length;
    }
  }
};