wxhuanart/miniprogram/components/swipescreen/swipescreen.wxml

<view class="ss-showcase" bindtouchstart="{{swipe.onStartDrag}}" bindtouchmove="{{swipe.onDrag}}" bindtouchend="{{swipe.onEndDrag}}" displayWidth="{{displayWidth}}" change:displayWidth="{{swipe.initWidth}}" style="height: {{displayHeight}};width: {{displayWidth}}px;">
  <view id="wrapper" class="ss-showcase__wrap">
    <slot />
  </view>
  <view class="ss-showcase__absolute">
    <view class="dotsbar" wx:if="{{displayDots}}">
      <view wx:for="{{lens}}" wx:key="index" class="dot{{current === item ? ' dot-active': ''}}" />
    </view>
    <slot name="pointer" />
  </view>
</view>

<wxs module="swipe">
  var THRESHOLD = 0.3
  var MIN_DISTANCE = 10
  var owner
  var state

  var getState = function (ownerInstance) {
    owner = ownerInstance
    state = owner.getState()
  }

  var initWidth = function (newVal, oldVal, ownerInstance) {
    getState(ownerInstance)
    state.screen = newVal
  }

  var _restTouchStatus = function () {
    state.direction = undefined
    state.deltaX = 0
    state.deltaY = 0
    state.offsetX = 0
    state.offsetY = 0
  }

  var _getDirection = function (x, y) {
    if (x > y && x > MIN_DISTANCE) {
      return 'horizontal'
    }
    if (y > x && y > MIN_DISTANCE) {
      return 'vertical'
    }
    return undefined
  }

  var _range = function (num, min, max) {
    return Math.min(Math.max(num, min), max)
  }

  var _throttle = function (fn, gapTime) {
    if (gapTime == null || gapTime == undefined) {
      gapTime = 1500
    }
    var _lastTime = null
    // 返回新的函数
    return function () {
      var _nowTime = getDate()
      if (_nowTime - _lastTime > gapTime || !_lastTime) {
        fn(arguments[0]) //将this和参数传给原函数
        _lastTime = _nowTime
      }
    }
  }

  var _swipeMove = function (_offset = 0, sec = 0.6) {
    state.offset = _range(
      _offset,
      state.screen - state.wrapx,
      0,
    )
    var transform = 'translate3d(' + state.offset + 'px, 0, 0)'
    var transition = state.dragging
      ? 'none'
      : ('transform ' + sec + 's cubic-bezier(0.18, 0.89, 0.32, 1)')
    owner.selectComponent('#wrapper').setStyle({
      '-webkit-transform': transform,
      '-webkit-transition': transition,
      'transform': transform,
      'transition': transition
    })
  }

  var onStartDrag = function (event, ownerInstance) {
    getState(ownerInstance)
    _restTouchStatus()
    var wrapper = owner.selectComponent('#wrapper')
    var rect = wrapper.getBoundingClientRect()

    // state.rect = rect
    state.wrapx = rect.width
    state.startOffset = state.offset || 0

    var touchPoint = event.touches[0]
    state.startX = touchPoint.clientX
    state.startY = touchPoint.clientY
  }

  var onDrag = function (event, ownerInstance) {
    getState(ownerInstance)

    var touchPoint = event.touches[0]
    state.deltaX = touchPoint.clientX - state.startX
    state.deltaY = touchPoint.clientY - state.startY
    state.offsetX = Math.abs(state.deltaX)
    state.offsetY = Math.abs(state.deltaY)
    state.direction = state.direction || _getDirection(state.offsetX, state.offsetY)

    if (state.direction !== 'horizontal') {
      return
    }
    state.isDragging = true
    _swipeMove(state.startOffset + state.deltaX, 0.2)
  }

  var onEndDrag = function (event, ownerInstance) {
    getState(ownerInstance)
    state.isDragging = false

    var SCREEN = state.screen
    var therwidth = SCREEN * THRESHOLD

    var idx = 0
    if (Math.abs(state.deltaX) >= therwidth) {
      if (state.deltaX >= 0) {
        idx = Math.floor(state.offset / SCREEN) + 1
      } else if (state.deltaX < 0) {
        idx = Math.floor(state.offset / SCREEN)
      }
    } else {
      if (state.deltaX >= 0) {
        idx = Math.floor(state.offset / SCREEN)
      } else if (state.deltaX < 0) {
        idx = Math.floor(state.offset / SCREEN) + 1
      }
    }
    _swipeMove(idx * SCREEN)
    ownerInstance.callMethod("changedIndex", { idx: Math.abs(idx) })
    //console.log(JSON.stringify(ownerInstance), ownerInstance.triggerEvent)
    //ownerInstance("changedIndex", { idx })
  }

  module.exports = {
    onDrag: onDrag,
    onStartDrag: onStartDrag,
    onEndDrag: onEndDrag,
    initWidth: initWidth
  }
</wxs>