小程序定制cover-view中使用translate拖拽会有抖动,这怎么解决
2019-03-15 18:14:57
微信公开课小程序热门讨论关于「小程序定制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拖拽会有抖动,这怎么解决」的讨论可以前往微信公开课小程序参与互动哦!
补充:小程序定制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拖拽会有抖动,这怎么解决」的讨论可以前往微信公开课小程序参与互动哦!
标签:微信公开课,小程序
「小程序定制cover-view中使用translate拖拽会有抖动,这怎么解决」热门讨论订阅
方法1:微信扫描微信公开课小程序码即可订阅热门讨论「小程序定制cover-view中使用translate拖拽会有抖动,这怎么解决」
方法2:微信搜索微信公开课小程序名称进入,即可订阅热门讨论「小程序定制cover-view中使用translate拖拽会有抖动,这怎么解决」
方法3:微信网页访问即速商店,长按识别微信公开课小程序码即可订阅热门讨论「小程序定制cover-view中使用translate拖拽会有抖动,这怎么解决」
微信公开课小程序热门讨论「小程序定制cover-view中使用translate拖拽会有抖动,这怎么解决」由微信公开课原创摘录于微信小程序商店shop.jisuapp.cn,转载请注明出处。
微信公开课热门讨论「小程序定制cover-view中使用translate拖拽会有抖动,这怎么解决」由微信公开课开发者向微信用户提供,并对本服务内容、数据资料及其运营行为等真实性、合法性及有效性承担全部责任。
微信公开课小程序
更新时间:2019-03-15 18:14:57
>
__methodCallerx27;ofundefined
>-404011cloudfunctionexecutionerror
>,请补充选择商家自营-预付卡销售-发行方类目,并在基础信息处申请该类目,通过
>:host在模拟器中显示无效
>:请在小程序服务页面上架正式(非测试)内容或商品后重新提交审核
>.net 微信小程序 上传图片
>'setTimeout'的问题
>‘三朵里熙SPA主题减压空间’为什么搜索关键词‘三朵里‘搜不到
>‘扫普通链接二维码打开小程序‘中设置为体验版,扫码打开是线上版本
>“cloudfunctions**indexjs”gitignore
>“NO ULINK DEVICE FOUND”是怎么回事
>“万马掌上校园”的类目审核
>“上线了”公司开发的微信小程序怎么样?
>“产品是否一定需要条形码”
>