123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166 |
- <!--components/swipe-out/swipe-out.wxml-->
- <view class="wr-class wr-swipeout" data-key="cell" capture-bind:tap="onClick" bindtouchstart="{{disabled || swipe.startDrag}}" capture-bind:touchmove="{{disabled || swipe.onDrag}}" bindtouchend="{{disabled || swipe.endDrag}}" bindtouchcancel="{{disabled || swipe.endDrag}}" closed="{{closed}}" change:closed="{{swipe.onCloseChange}}" leftWidth="{{leftWidth}}" rightWidth="{{rightWidth}}" change:leftWidth="{{swipe.initLeftWidth}}" change:rightWidth="{{swipe.initRightWidth}}">
- <view id="wrapper">
- <view wx:if="{{ leftWidth }}" class="wr-swipeout__left" data-key="left" catch:tap="onClick">
- <slot name="left" />
- </view>
- <slot />
- <view wx:if="{{ rightWidth }}" class="wr-swipeout__right" data-key="right" catch:tap="onClick">
- <slot name="right" />
- </view>
- </view>
- </view>
- <wxs module="swipe">
- var THRESHOLD = 0.3
- var MIN_DISTANCE = 10
- var owner
- var state
- var i = 0
- var getState = function (ownerInstance) {
- owner = ownerInstance
- state = owner.getState()
- state.leftWidth = state.leftWidth || 0
- state.rightWidth = state.rightWidth || 0
- state.offset = state.offset || 0
- state.startOffset = state.startOffset || 0
- }
- var initRightWidth = function (newVal, oldVal, ownerInstance) {
- getState(ownerInstance)
- state.rightWidth = newVal
- if (state.offset < 0) {
- swipeMove(-state.rightWidth)
- }
- }
- var initLeftWidth = function (newVal, oldVal, ownerInstance) {
- getState(ownerInstance)
- state.leftWidth = newVal
- if (state.offset > 0) {
- swipeMove(state.leftWidth)
- }
- }
- var resetTouchStatus = function () {
- state.direction = ''
- state.deltaX = 0
- state.deltaY = 0
- state.offsetX = 0
- state.offsetY = 0
- }
- var touchMove = function (event) {
- 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)
- }
- var getDirection = function (x, y) {
- if (x > y && x > MIN_DISTANCE) {
- return 'horizontal'
- }
- if (y > x && y > MIN_DISTANCE) {
- return 'vertical'
- }
- return ''
- }
- var range = function (num, min, max) {
- return Math.min(Math.max(num, min), max)
- }
- var swipeMove = function (_offset = 0) {
- state.offset = range(
- _offset,
- -state.rightWidth,
- +state.leftWidth,
- )
- var transform = 'translate3d(' + state.offset + 'px, 0, 0)'
- var transition = state.dragging
- ? 'none'
- : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)'
- owner.selectComponent('#wrapper').setStyle({
- '-webkit-transform': transform,
- '-webkit-transition': transition,
- 'transform': transform,
- 'transition': transition
- })
- }
- var close = function () {
- swipeMove(0)
- }
- var onCloseChange = function (newVal, oldVal, ownerInstance) {
- getState(ownerInstance)
- if (newVal === oldVal) return
- if (newVal) {
- close()
- }
- }
- var touchStart = function (event) {
- resetTouchStatus()
- state.startOffset = state.offset
- var touchPoint = event.touches[0]
- state.startX = touchPoint.clientX
- state.startY = touchPoint.clientY
- owner.callMethod('closeOther')
- }
- var startDrag = function (event, ownerInstance) {
- getState(ownerInstance)
- touchStart(event)
- }
- var onDrag = function (event, ownerInstance) {
- getState(ownerInstance)
- touchMove(event)
- if (state.direction !== 'horizontal') {
- return
- }
- state.dragging = true
- swipeMove(state.startOffset + state.deltaX)
- }
- var open = function (position) {
- var _offset = position === 'left' ? +state.leftWidth : -state.rightWidth
- owner.callMethod('open', { position: position })
- swipeMove(_offset)
- }
- var endDrag = function (event, ownerInstance) {
- getState(ownerInstance)
- state.dragging = false
- // 左/右侧有可滑动区域,且当前不是已open状态,且滑动幅度超过阈值时open左/右侧(滚动到该侧的最边上)
- if (+state.rightWidth > 0 && -state.startOffset < +state.rightWidth && -state.offset > +state.rightWidth * THRESHOLD) {
- open('right')
- } else if (+state.leftWidth > 0 && state.startOffset < +state.leftWidth && state.offset > +state.leftWidth * THRESHOLD) {
- open('left')
- } else {
- // 仅在有发生侧滑的情况下自动关闭(由js控制是否异步关闭)
- if (state.startOffset !== state.offset) {
- close()
- }
- }
- }
- module.exports = {
- initLeftWidth: initLeftWidth,
- initRightWidth: initRightWidth,
- startDrag: startDrag,
- onDrag: onDrag,
- endDrag: endDrag,
- onCloseChange: onCloseChange
- }
- </wxs>
|