小程序定制cover-view中使用translate拖拽会有抖动，这怎么解决

微信公开课小程序热门讨论关于「小程序定制cover-view中使用translate拖拽会有抖动，这怎么解决」的小程序开发问题
补充:小程序定制coverview中使用translate拖拽会有抖动，这怎么解决
展开:当前Bug的表现预期表现<stylelang=lesscontainer{width:100%;background:000;height:100vh;map{padding:30rpx;}}cardContainer,CovercardContainer{position:absolute;width:100%;display:flex;flexdirection:column;padding:30rpx;borderspacing:borderbox;transform:translateY(100%);cradItem{width:100%;height:300rpx;textalign:center;lineheight:300rpx;background:ffffff;}}<style<template<viewclass=container<coverviewclass=CovercardContainerstyle=transform:translate3d(0,{{CovertranslateY}}px,0);transition:{{Covertransition}}catch:touchstart=Coverstartcatch:touchmove=Covermovecatch:touchend=Coverend<coverviewclass=cradItemcoverview<coverview<coverview<viewclass=cardContainerstyle=transform:translate3d(0,{{translateY}}px,0);transition:{{transition}}catch:touchstart=startcatch:touchmove=movecatch:touchend=end<viewclass=cradItemview<view<view<view<template<scriptimportwepyfromwepyimporttestMixinfrommixinstestvartimer=nullexportdefaultclassIndexextendswepypage{config={navigationBarTitleText:test,disableScroll:true}components={}mixins=[testMixin]data={top:0,screenHeight:0,lastY:0,startY:0,lastMoveTime:0,lastMoveStart:0,stopInertiaMove:false,transition:,translateY:0,minTranslateY:0,卡片能移动最小距离maxTranslateY:0,卡片能移动最大距离isTransform:false,是否开启拖动卡片事件CoverlastY:0,CoverstartY:0,CoverlastMoveTime:0,CoverlastMoveStart:0,CoverstopInertiaMove:false,Covertransition:,CovertranslateY:0,CoverminTranslateY:0,卡片能移动最小距离CovermaxTranslateY:0,卡片能移动最大距离CoverisTransform:false,是否开启拖动卡片事件}computed={}methods={start(e){if(!thisisTransform)returnif(echangedToucheslength<=0)returnthislastY=thisstartY=parseInt(echangedTouches[0]pageY);thislastX=thisstartX=parseInt(echangedTouches[0]pageX);thistransition=缓动代码thislastMoveStart=thislastY;thislastMoveStartX=thislastX;thislastMoveTime=newDate()getTime();thisstopInertiaMove=true;this$apply()},move(e){if(!thisisTransform)returnif(echangedToucheslength<=0)returnletnowY=parseInt(echangedTouches[0]pageY);letmoveY=nowYthislastY;lettranslateY=thistranslateYif(Mathabs(moveY)=0&&Mathabs(moveY)<=5){return}letnewTranslateY=(parseInt(translateY)+moveY)thistranslateY=newTranslateY;thislastY=nowY;***缓动代码*letnowTime=newDate()getTime();thisstopInertiaMove=true;if(nowTimethislastMoveTime300){thislastMoveTime=nowTime;thislastMoveStart=nowY;}this$apply()},end(e){consolelog(e)letnowY=echangedTouches[0]pageY;letmoveY=nowYthislastY;lettranslateY=thistranslateY;letnewTranslateY=parseInt(translateY)+moveYthislastY=nowY;***缓动代码*letnowTime=newDate()getTime();lettimeDiff=nowTimethislastMoveTimeletdistanceDiff=nowYthislastMoveStartletv=distanceDifftimeDiff;thisstopInertiaMove=false;letlateY=newTranslateY+vif(lateY<thisminTranslateY){thistranslateY=thisminTranslateY}elseif(lateY0&&lateY<thismaxTranslateY){thistranslateY=lateY+v;}else{thistranslateY=thismaxTranslateY}thistransition=transform200mscubicbezier(01,057,01,1)this$apply()},Coverstart(e){if(!thisCoverisTransform)returnif(echangedToucheslength<=0)returnthisCoverlastY=thisCoverstartY=parseInt(echangedTouches[0]pageY);thisCovertransition=缓动代码thisCoverlastMoveStart=thisCoverlastY;thisCoverlastMoveTime=newDate()getTime();thisCoverstopInertiaMove=true;this$apply()},Covermove(e){if(!thisCoverisTransform)returnif(echangedToucheslength<=0)returnletnowY=parseInt(echangedTouches[0]pageY);letmoveY=nowYthisCoverlastY;lettranslateY=thisCovertranslateYif(Mathabs(moveY)=0&&Mathabs(moveY)<=5){return}letnewTranslateY=(parseInt(translateY)+moveY)thisCovertranslateY=newTranslateY;thisCoverlastY=nowY;***缓动代码*letnowTime=newDate()getTime();thisCoverstopInertiaMove=true;if(nowTimethisCoverlastMoveTime300){thisCoverlastMoveTime=nowTime;thisCoverlastMoveStart=nowY;}this$apply()},Coverend(e){consolelog(e)letnowY=echangedTouches[0]pageY;letmoveY=nowYthisCoverlastY;lettranslateY=thisCovertranslateY;letnewTranslateY=parseInt(translateY)+moveYthisCoverlastY=nowY;***缓动代码*letnowTime=newDate()getTime();lettimeDiff=nowTimethisCoverlastMoveTimeletdistanceDiff=nowYthisCoverlastMoveStartletv=distanceDifftimeDiff;thisCoverstopInertiaMove=false;letlateY=newTranslateY+vif(lateY<thisCoverminTranslateY){thisCovertranslateY=thisCoverminTranslateY}elseif(lateY0&&lateY<thisCovermaxTranslateY){thisCovertranslateY=lateY+v;}else{thisCovertranslateY=thisCovermaxTranslateY}thisCovertransition=transform200mscubicbezier(01,057,01,1)this$apply()}}CovercardContainergetCardHeight(){varquery=wxcreateSelectorQuery()queryselect(cardContainer)boundingClientRect()queryselect(CovercardContainer)boundingClientRect()queryexec((res)={if(reslength0){thiscardHeight=res[0]heightconsolelog(res)计算卡片初始位置当设备图片组件显示时获取其高度并计算卡片能移动最小距离thisminTranslateY=wxgetStorageSync(ScreenH)res[0]height150thisCoverminTranslateY=0letdeviceImageViewH=res[1]height,willMove=(deviceImageViewH2)卡片能移动最大距离thismaxTranslateY=wxgetStorageSync(ScreenH)res[0]heightthisCovermaxTranslateY=wxgetStorageSync(ScreenH)res[0]height300thistranslateY=thismaxTranslateYthisCovertranslateY=thisCovermaxTranslateYthisisTransform=truethisCoverisTransform=truethis$apply()}})}events={}onLoad(){wxgetSystemInfo({success:res={varkScreenW=reswindowWidth375;varkScreenH=reswindowHeight603;wxsetStorageSync(kScreenW,kScreenW);wxsetStorageSync(kScreenH,kScreenH);wxsetStorageSync(ScreenH,reswindowHeight);wxsetStorageSync(ScreenW,reswindowWidth);thisscreenHeight=reswindowHeightthis$apply()}})thisgetCardHeight()}}<script复现路径提供一个最简复现Demo即速小程序：麻烦提供一下出现问题的机型和微信版本，并且给个相关的代码片段（https:developersweixinqqcomminiprogramdevdevtoolsminicodehtml）
更多有关「小程序定制cover-view中使用translate拖拽会有抖动，这怎么解决」的讨论可以前往微信公开课小程序参与互动哦！了解更多