之前使用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> |
如果实在没人能解决，我只好使用canvas实现这个组件的上下滚动，以毒攻毒，不能操作dom真难受