uni-app scroll-view标签 scroll-left动态设置位置时 scroll-view标签内容水平位置抖动

uni-app scroll-view标签 scroll-left动态设置位置时 scroll-view标签内容水平位置抖动

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

产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.45

浏览器平台：Chrome

浏览器版本：133.0.6943.60（正式版本64 位）

示例代码：

html
<view>
<scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation :show-scrollbar="false">
<view class="scroll-view-item_H UEl_0">煤矿概况</view>
<view class="scroll-view-item_H UEl_1">人员车辆</view>
<view class="scroll-view-item_H UEl_2">系统监控</view>
<view class="scroll-view-item_H UEl_3">原煤生产</view>
<view class="scroll-view-item_H UEl_4">土石剥离</view>
</scroll-view>
</view>
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item">testpage1</swiper-item>
<swiper-item class="swiper-item">testpage1</swiper-item>
<swiper-item class="swiper-item">testpage1</swiper-item>
<swiper-item class="swiper-item">testpage1</swiper-item>
<swiper-item class="swiper-item">testpage1</swiper-item>
</swiper>

js
animationfinish({ detail: { current } }) {
this.scrollLeft=351;
}

css
.scroll-view-item_H {
display: inline-block;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 36rpx;
padding: 0px 10px;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}


## 操作步骤：
滑动swiper后 当滑动到第三个选项“系统监控”时 scroll-view子标签整体跳动一下

## 预期结果：
无论左右滑 scroll-view子标签水平位置不动

## 实际结果：
滑动swiper后 当滑动到第三个选项“系统监控”时 scroll-view子标签整水平位置抖动

## bug描述：
当scroll-view标签下的子标签宽度超出scroll-view标签的宽度 通过scroll-view标签的scroll-left实现动态设置水平移动的时候 scroll-view子标签会跳动

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20250314/31378bc7175d80480b7a3d9cdb50e6fe.jpg)

更多关于uni-app scroll-view标签 scroll-left动态设置位置时 scroll-view标签内容水平位置抖动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

估计你这个值，scroll-left，不准确吧，不知道你那宽度是不是都一样，或者，你也可以用uni.createSelectorQuery()动态的获取每个标签的宽度， 也可以scroll-into-view 替代 scroll-left试试

更多关于uni-app scroll-view标签 scroll-left动态设置位置时 scroll-view标签内容水平位置抖动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


找到原因了 是因为当滑动的时候swiper-view生成的标签

overflow有一瞬间被改成hidden然后又变成auto hidden 当是hidden的时候 文字水平位置变高 产生抖动跳跃的感觉 不知道这个咋给禁掉

这是一个常见的scroll-view滚动抖动问题，主要原因是scroll-left的动画效果与swiper切换动画产生了冲突。以下是解决方案：

  1. 去除scroll-with-animation属性，改为直接设置scroll-left：
<scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="scrollLeft" :show-scrollbar="false">
  1. 在animationfinish回调中，使用nextTick延迟设置scrollLeft：
animationfinish({ detail: { current } }) {
  this.$nextTick(() => {
    this.scrollLeft = 351;
  });
}
  1. 或者改用transition回调来同步滚动位置：
transition({ detail: { dx } }) {
  this.scrollLeft = 351 + dx;
}
  1. 确保scrollLeft的值是精确计算的，避免小数像素值导致抖动：
animationfinish({ detail: { current } }) {
  this.scrollLeft = Math.round(351);
}
回到顶部