tyjs_wxapp/component/iView/swipeout/index.js

 /*
* touch事件判断方式
* https://github.com/madrobby/zepto/blob/master/src/touch.js#files
*/
function swipeDirection(x1, x2, y1, y2) {
    return Math.abs(x1 - x2) >=
    Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
}

Component({
    externalClasses: ['i-class'],
    properties: {
        actions: {
            value: [],
            type: Array,
            observer : '_updateButtonSize'
        },
        unclosable : {
            value : false,
            type : Boolean
        },
        toggle : {
            value : false,
            type : Boolean,
            observer : 'closeButtonGroup'
        },
        operateWidth : {
            type : Number,
            value : 160
        }
    },
    options: {
        // 在组件定义时的选项中启用多slot支持
        multipleSlots: true
    },
    data : {
        //touch start position
        tStart : {
            pageX : 0,
            pageY : 0
        },
        //限制滑动距离
        limitMove : 0,
        //element move position
        position : {
            pageX : 0,
            pageY : 0
        }
    },
    methods : {
        //阻止事件冒泡
        loop(){},
        _updateButtonSize(){
            const actions = this.data.actions;
            if( actions.length > 0 ){
                const query = wx.createSelectorQuery().in(this);
                let limitMovePosition = 0;
                actions.forEach(item => {
                    limitMovePosition += item.width || 0;
                });
                this.data.limitMove = limitMovePosition;
                /*
                    * 动态获取每个传进值的按钮尺寸不能正确获取，在安卓上少了6px
                    * 暂时实现需要在actions里面传递宽度
                    * 需要后期调研
                */
                //query.selectAll('.i-swipeout-button-right-item').boundingClientRect((rects)=>{
                //     if( rects ){
                //         console.log(rects,1111111)
                //         rects.forEach(item => {
                //             limitMovePosition += item.width;
                //         });
                //         this.data.limitMove = limitMovePosition;
                //         console.log(limitMovePosition,111111111)
                //     }
                // }).exec()
            }else{
                this.data.limitMove = this.data.operateWidth;
                
            }
        },
        handlerTouchstart(event){
            const touches = event.touches ? event.touches[0] : {};
            const tStart = this.data.tStart;
            if( touches ){
                for( let i in tStart ){
                    if( touches[i] ){
                        tStart[i] = touches[i];
                    }
                }
            }
        },
        swipper(touches){
            const data = this.data;
            const start = data.tStart;
            const spacing = {
                pageX : touches.pageX - start.pageX,
                pageY : touches.pageY - start.pageY
            }
            if( data.limitMove <  Math.abs( spacing.pageX ) ){
                spacing.pageX = -data.limitMove;
                
            }
            this.setData({
                'position' : spacing
            })
        },
        handlerTouchmove(event){
            const start = this.data.tStart;
            const touches = event.touches ? event.touches[0] : {};
            if( touches ){
                const direction = swipeDirection( start.pageX,touches.pageX,start.pageY,touches.pageY );
                if( direction === 'Left' ){
                    this.swipper( touches );
                }
            }
        },
        handlerTouchend(event){
            const start = this.data.tStart;
            const touches = event.changedTouches ? event.changedTouches[0] : {};
            if( touches ){
                const direction = swipeDirection( start.pageX,touches.pageX,start.pageY,touches.pageY );
                const spacing = {
                    pageX : touches.pageX - start.pageX,
                    pageY : touches.pageY - start.pageY
                }
                if( Math.abs( spacing.pageX ) >= 40 && direction === "Left" ){
                    spacing.pageX = spacing.pageX  < 0 ? - this.data.limitMove : this.data.limitMove;
                }else{
                    spacing.pageX = 0;
                }
                this.setData({
                    'position' : spacing
                })
            }
        },
        handlerButton(event){
            if( !this.data.unclosable ){
                this.closeButtonGroup();
            }
            const dataset = event.currentTarget.dataset;
            this.triggerEvent('change',{
                index : dataset.index
            })
        },
        closeButtonGroup(){
            this.setData({
                'position' : {pageX : 0,pageY : 0}
            })
        },
        //控制自定义组件
        handlerParentButton(event){
            if( !this.data.unclosable ){
                this.closeButtonGroup();
            }
        }
    },
    ready(){
        this._updateButtonSize();
    }
});