小程序回弹组件

js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

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

?

1 2 3 4 5 6 7 8

.flex_box {     transition: 200ms ease-out; }   .flex_box .mch_list_panel {     width: 100%;     white-space: nowrap; }