收藏
回答

持续调用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>



最后一次编辑于  2018-08-29  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 枫语
    枫语
    2018-08-29

    如果实在没人能解决,我只好使用canvas实现这个组件的上下滚动,以毒攻毒,不能操作dom真难受

    2018-08-29
    赞同
    回复