123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- <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>
|