uni-app 3.2.3.20210825的下一个版本更新了scroll-view 导致scroll-view滚动动画不起效果

uni-app 3.2.3.20210825的下一个版本更新了scroll-view 导致scroll-view滚动动画不起效果

开发环境 版本号 项目创建方式
Windows Win7 HBuilderX

示例代码:

<scroll-view class="scroll-view_H" scroll-x scroll-with-animation :scroll-left="scrollLeft"> </scroll-view> ```

操作步骤:

<scroll-view class="scroll-view_H" scroll-x scroll-with-animation :scroll-left="scrollLeft"> </scroll-view> ```

预期结果:

变更scroll-left值切换有一个滚动的过程


### 实际结果:


没有动画

更多关于uni-app 3.2.3.20210825的下一个版本更新了scroll-view 导致scroll-view滚动动画不起效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 3.2.3.20210825的下一个版本更新了scroll-view 导致scroll-view滚动动画不起效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app 3.2.3.20210825版本中,scroll-view组件的scroll-with-animation属性在某些情况下确实可能出现动画失效的问题。这通常与底层渲染引擎的更新有关,尤其是在H5平台和小程序平台表现不一致时。

可能的原因:

  1. 平台差异:不同平台对scroll-with-animation的实现方式不同,更新后可能影响了动画的触发机制。
  2. 数据绑定时机scroll-left的值变化可能未触发动画重绘。
  3. CSS冲突:自定义样式可能影响了滚动容器的动画属性。

建议的解决方案:

  1. 检查平台兼容性:确认问题是否在特定平台出现,可尝试添加条件编译。
  2. 使用nextTick:确保DOM更新后再修改scroll-left值:
    this.scrollLeft = newValue;
    this.$nextTick(() => {
      // 可尝试二次赋值触发动画
    });
回到顶部