小程序回弹组件

js

Component({
    /**
     * 组件的属性列表
     */
    properties: {
    },
    /**
     * 组件的初始数据
     */
    data: {
        deltaX: 0, // 左右滑动回弹距离
        _startx: 0, // 开始的位置x
        _starty: 0, // 开始的位置y
        _endx: 0, // 结束的位置x
        _elasticDir: 1, // 1 左回弹 2 右回弹 0 不回弹
        _flexBoxTap: true, // 是否点击事件
    },
    lifetimes: {

    },
    /**
     * 组件的方法列表
     */
    methods: {
        // 横向点击事件
        bindFlexBoxTap() {
            // 点击事件时阻止跳转全部活动列表
            this.data._flexBoxTap = true;
        },
        // 横向滚动到最左边事件
        bindscroll(e) {
            this.data._elasticDir = 0;
        },
        // 横向滑动到最右边触发
        bindscrolltolower(e) {
            let timer = setTimeout(() => {
                this.data._elasticDir = 2;
                clearTimeout(timer);
            }, 100);
        },
        // 横向触摸开始事件
        scrollTouchstart(e) {
            this.setData({
                _startx: e.touches[0].pageX,
                _starty: e.touches[0].pageY
            });
        },
        // 横向触摸移动事件
        scrollTouchmove(e) {
            this.data._flexBoxTap = false;
            let px = e.touches[0].pageX;
            let py = e.touches[0].pageY;
            let { _startx, _starty } = this.data;
            this.setData({ _endx: px });
            let deltaX = px - _startx;
            let deltaY = py - _starty;
            if (deltaY > 10 || deltaY < -10) return;
            if (deltaX < 50 && deltaX > -50) this.setData({ deltaX });
        },
        // 横向触摸结束事件
        scrollTouchend(e) {
            // 横向向右触摸移动事件才跳转
            let { _elasticDir, deltaX } = this.data;
            if (_elasticDir === 2) {
                // 点击事件时阻止跳转全部活动列表
                deltaX < 0 && !this.data._flexBoxTap && this.triggerEvent("goMore");
            }
            this.setData({ _startx: 0, _starty: 0, _endx: 0, deltaX: 0 });
        }
    }
})

　　wxss

.flex_box {
    transition: 200ms ease-out;
}

.flex_box .mch_list_panel {
    width: 100%;
    white-space: nowrap;
}