1***@qq.com
1***@qq.com
  • 发布:2022-08-05 11:50
  • 更新:2022-08-16 21:03
  • 阅读:509

【报Bug】nvue的dom.scrollToElement方法滚动效果错误

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

手机系统: Android

手机系统版本号: Android 10

手机厂商: vivo

手机机型: IQOO

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<list :id="pageId" :bounce="true" class="Flex1" @touchmove="touchMove" :scrollable="canScroll"> <cell ref="info"> <imgSwiper :show-btn="true" /> <buildingIntroduction :project-id="projectId" :items="detailInfo" :show-btn="false" /> </cell> <cell ref="tab"> <myp-tabs-h value="tabStatus" is-tap="true" items="tabList" width="0" delay="300" space="30rpx"
left="30rpx"
right="30rpx"
active-text-type="primary"
indicator-type="primary"
@change="tabChange"
/>
</cell>
<cell :style="[{ height: listHeight + 'px' }]">
<list ref="list" class="Flex1" :scrollable="canScroll">
<cell ref="tab0" @appear="e => handleAppear(e,0)" @disappear="e => handleDisappear(e,0)">
<splitTitle title="楼盘介绍" @clickRight="handleClickRight(0)" />
<view class="PdV30">
<rich-text :nodes="houseIntroduce" />
</view>
</cell>
<cell ref="tab1" @appear="e => handleAppear(e,1)" @disappear="e => handleDisappear(e,1)">
<splitTitle title="户型信息" right-text="更多户型" @clickRight="handleClickRight(1)" />
<houseType :items="houseTypeList" />
</cell>
<cell ref="tab2" @appear="e => handleAppear(e,2)" @disappear="e => handleDisappear(e,2)">
<splitTitle title="预售信息" right-text="详情信息" @clickRight="handleClickRight(2)" />
<preSale :items="preSaleList" />
</cell>
<cell ref="tab3" @appear="e => handleAppear(e,3)" @disappear="e => handleDisappear(e,3)">
<splitTitle title="周边配套/交通" :show-right="false" />
<surrounding />
</cell>
<cell ref="tab4" @appear="e => handleAppear(e,4)" @disappear="e => handleDisappear(e,4)">
<splitTitle title="营销信息" right-text="详情信息" @clickRight="handleClickRight(4)" />
<marketing :items="marketingInfo" type="list" />
</cell>
<cell ref="tab5" @appear="e => handleAppear(e,5)" @disappear="e => handleDisappear(e,5)">
<splitTitle title="开盘信息" right-text="详情信息" @clickRight="handleClickRight(5)" />
<openInfo :items="openInfo" />
</cell>
<myp-list-cell>
<view :style="{height:bottomHeight + 20 + 'px'}" />
</myp-list-cell>
<bottomContact :safe-bottom-height="safeBottomHeight" from="new" @getHeight="e => { bottomHeight = e }" />
</list>
</cell>
</list>

// 都是组件化的,但是你用cell多遍历一些然后滚动也是同样的问题

tabChange(index) {
this.tabStatus = index
// #ifdef MP-WEIXIN || H5
uni.pageScrollTo({
scrollTop: this.titleTopList.at(index) + 5,
duration: 0
})
// #endif

  // #ifdef APP-PLUS  
  this.isDragging = false  
  dom.scrollToElement(this.$refs.list)  
  setTimeout(_ => {  
    dom.scrollToElement(this.$refs[`tab${index}`])  
  }, 300)  
  // #endif  
},

操作步骤:

直接点击tab滚动页面

预期结果:

能够滚动到指定位置并在list顶部

实际结果:

过长时滚动到了list底部;两次滚动到同一cell错乱

bug描述:

1.nvue页面使用dom.scrollToElement滚动时,如果当前的位置距离要滑动的cell很远(大于一屏)时,并没有把cell拉到list的最上面,而是底部

  1. 使用tabs,点击每个tab使用dom.scrollToElement滚动到指定cell,点击一次后不做任何操作再次点击该按钮,有时候会滚动到其他位置
2022-08-05 11:50 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

录屏太大了上传不上去,就是当前cell到要滚动的cell中间距离过大就滚到了底部而不是顶部,另外我用了list嵌套,list.setSpecialEffects(args),看别的帖子上说打包后就没问题但是还是不行

DCloud_UNI_Anne

DCloud_UNI_Anne

用文档是示例是否能复现?如果不能的话,请简化代码提供可直接运行的最小化复现示例(上传附件)【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

该问题目前已经被锁定, 无法添加新回复