持续调用Animation.translateY在真机上出现卡顿
之前使用scroll-view实现组件内部的滚动,但是因为canvas导致不得不使用cover-view,但是cover-view中不支持scroll-view,所以只能手写组件内部上下滚动,主要是解决手指上下拖动其内容。
但是因为监听touchmove导致不断更新Animation.translateY,在真机上测试出现非常严重的卡顿,到了无法忍受的地步,
代码略丑,如有想法可以提出
flootTouchStart: function(e){ // console.log(e.touches[0].clientY) this.setData({ floorTouchStart: e.touches[0] }) }, flootTouchMove: function(e) { // const flootTouchStartX = this.data.floorTouchStart.clinetX; const flootTouchStartY = this.data.floorTouchStart.clientY; // console.log(flootTouchStartY); // const flootMoveX = e.touches[0].clinetX; const floorMoveY = e.touches[0].clientY; let curMove = floorMoveY - flootTouchStartY; this.setData({ floorTouchStart: e.touches[0] }) if (this.data.floorList.length > 5 ) { if (this.data.floorMove > -(this.data.floorList.length - 5) * 32 && curMove < 0 ) { // 向下滚 // console.log(curMove); this.setData({ floorMove: curMove + this.data.floorMove }) } else if (this.data.floorMove < 0 && curMove > 0) { // 向上滚 this.setData({ floorMove: curMove + this.data.floorMove }) } } console.log('xx' + curMove) this.floorAnimation.translateY(this.data.floorMove).step() this.setData({ floorAnimationData: this.floorAnimation.export() }) }, |
// index.wxml<cover-view class='chooseFloor' wx:if="{{chooseFloorShow}}" catchtouchstart='flootTouchStart' catchtouchmove='flootTouchMove'> <cover-view animation="{{floorAnimationData}}" class='inner-container'> <cover-view wx:for="{{floorList}}" wx:key="{{index}}" data-num="{{index}}" class='floorItem {{curFloor == item?"curfloor": ""}}' bindtap='confirmFloor'> <cover-view>{{item}}</cover-view> </cover-view> </cover-view> </cover-view> |
