uni-app 在scroll-view中动态设置scroll-left如果手动滑动过则自动滚动失效

uni-app 在scroll-view中动态设置scroll-left如果手动滑动过则自动滚动失效

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
版本号 windows7
HBuilderX 正式
版本号 3.1.13
手机系统 Android
版本号 Android 7.0
手机厂商 华为
手机机型 全型号
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

let n = 0;  
let dir = self.dir;  
let list = self.dirlist;  
for(let x in list) {  
    if(list[x].dir == dir) {  
        n = x;  
    }  
}  
n = ((1/list.length)*(n-1)*1000);  
self.listindex = n;  
}  
(scroll-view scroll-x="true" class="news" :scroll-left="listindex")  
(view class="newsData")  
    (view v-for="(item, index) in dirlist" @click="setNum(item.dir)" class="news-item")  
        (view class="news-itemdate")  
            (view class="news-itemday")  
                {{item.startTime}}  
                (br/)  
                {{item.endTime}}  
            (/view)  
            (view class="news-itemtitle")  
                (view class="news-itemltitle")(/
                view)  
                (view class="news-itemtext" :class="item.dir==dir ? 'active' : ''")  
                    {{item.title}}  
                    {{listindex}}  
                (/view)  
                (view class="news-itemrtitle")(/
                view)  
            (/view)  
        (/view)  
    (/view)  
(/view)  
(/scroll-view)

操作步骤：

  • 滑动代码块

预期结果：

  • 手动操作后，应自动切换

实际结果：

  • 手动操作后，无自动切换

bug描述：

在scroll-view中 动态设置 scroll-left 如果手动滑动过，则自动滚动失效


更多关于uni-app 在scroll-view中动态设置scroll-left如果手动滑动过则自动滚动失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 在scroll-view中动态设置scroll-left如果手动滑动过则自动滚动失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 scroll-view 组件行为特性。当用户手动滑动 scroll-view 后，组件会记录用户的操作状态，此时通过动态绑定 scroll-left 属性设置的自动滚动可能会失效。

问题原因： scroll-view 在用户手动交互后会优先响应用户操作，系统会认为用户正在主动控制滚动位置，从而抑制程序化的滚动控制。

解决方案：

  1. 重置滚动状态：在需要触发自动滚动前，先临时将 scroll-left 设置为 0 或其他值，再设置回目标值
  2. 使用 $nextTick：确保 DOM 更新后再设置滚动位置
  3. 添加滚动监听：通过 @scroll 事件监听用户手动滚动，在需要时重新启用自动滚动

修改建议：

setNum(dir) {
    let n = 0;
    let list = this.dirlist;
    for(let x in list) {
        if(list[x].dir == dir) {
            n = x;
        }
    }
    
    // 先重置再设置目标值
    this.listindex = 0;
    this.$nextTick(() => {
        this.listindex = ((1/list.length)*(n-1)*1000);
    });
}

同时建议在 scroll-view 上添加滚动监听：

<scroll-view scroll-x="true" class="news" 
    :scroll-left="listindex"
    [@scroll](/user/scroll)="onScroll">
回到顶部