captain-ui/es/scroll/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-swiper",
      on: {
        "touchstart": function touchstart($event) {
          $event.preventDefault();
          return _vm.handleTouchStart($event);
        },
        "touchend": function touchend($event) {
          $event.preventDefault();
          return _vm.handleTouchEnd($event);
        },
        "mousedown": function mousedown($event) {
          $event.preventDefault();
          return _vm.handleTouchStart($event);
        },
        "mouseup": function mouseup($event) {
          $event.preventDefault();
          return _vm.handleTouchEnd($event);
        },
        "click": function click(e) {
          return e.preventDefault;
        }
      }
    }, [_c('div', {
      staticClass: "cap-scroll-swiper__inner"
    }, [_vm._t("default")], 2)]);
  },
  name: 'cap-scroll-swiper',
  props: {
    /**
     * 是否无限循环滚动
     */
    loop: {
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      animated: false,
      touchstart: false,
      touchstartY: 0,
      currentPage: 0,
      previousPage: 0,
      slideCount: 0,
      supportTouch: 'ontouchstart' in window
    };
  },
  watch: {
    direction: function direction(val) {
      this.enterClass = "slide-" + val;
      this.leaveActiveClass = "slide-" + this.flipway + "-" + val + "-active";
    }
  },
  mounted: function mounted() {
    this.getSlideCount();
  },
  methods: {
    handleTouchStart: function handleTouchStart(e) {
      if (!this.$isServer && !this.animated) {
        this.touchstart = true;
        this.touchstartY = this.supportTouch ? e.changedTouches[0].clientY : e.clientY;
      }
    },
    handleTouchEnd: function handleTouchEnd(e) {
      var _this = this;

      if (this.touchstart) {
        var eventPointY = this.supportTouch ? e.changedTouches[0].clientY : e.clientY;
        var deltaY = eventPointY - this.touchstartY;
        var direction = deltaY > 0 ? 'down' : 'up';
        this.touchstart = false; // 区分是否loop

        if (this.loop) {
          this.previousPage = this.currentPage;

          if (deltaY > 0) {
            this.currentPage > 0 ? this.currentPage-- : this.currentPage = this.slideCount - 1;
          } else {
            this.currentPage < this.slideCount - 1 ? this.currentPage++ : this.currentPage = 0;
          }
        } else if (deltaY > 0) {
          this.currentPage > 0 && this.currentPage--;
        } else {
          this.currentPage < this.slideCount - 1 && this.currentPage++;
        }

        this.$emit('pagechange', this.currentPage, this.previousPage, direction);
        this.animated = true;
        this.$slots.default[this.currentPage].componentInstance.$on('transitionend', function () {
          return _this.animated = false;
        });
      }
    },
    getSlideCount: function getSlideCount() {
      this.slideCount = this.$slots.default.filter(function (slot) {
        return slot.tag && slot.tag.indexOf('cap-scroll-slide') > -1;
      }).length;
    }
  }
};