uni-app scroll-view在微信小程序安卓真机上滑动不连贯，卡顿

uni-app scroll-view在微信小程序安卓真机上滑动不连贯，卡顿

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
# 操作步骤：
如内容描述

# 预期结果：
滑动式连贯正常滑动

# 实际结果：
滑动不连贯

# bug描述：
scroll-view在微信小程序安卓真机上滑动不连贯，卡顿。微信开发工具正常、APP正常，微信小程序真机预览不正常。
scroll-view装的聊天对话的数组，二三十条数据，手指滑动的时候，页面直接滑了一点就停了（此时手指在继续滑动），松手后再滑几次才能继续滑。

更多关于uni-app scroll-view在微信小程序安卓真机上滑动不连贯，卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

应该是scroll-view的高度没有设置成固定值，之前设置的height:100%,现在改成height: 100vh;滚动就不卡顿了，但是每次有新消息的时候就无法滚动到页面最底部了，之前用的uni.createSelectorQuery()获取scroll的高度，然后uni.pageScrollTo。现在scroll-view的高度设置死了，有新消息添加的时候就不能滚动到最底部了。求助

更多关于uni-app scroll-view在微信小程序安卓真机上滑动不连贯，卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html


找到解决办法了：scroll-view设置固定高度，滚动的时候用scroll-into-view，不用scroll-top，然后为scroll-view 中的item动态设置id,执行滚动到底部的方式时，直接改变你scorll-view中scroll-into-view动态绑定的值为最后一个子view的id。

在微信小程序安卓真机上出现scroll-view滑动卡顿的问题，通常与渲染性能和数据加载方式有关。以下是几个关键优化点：

  1. 启用增强型scroll-view
    在scroll-view标签中添加enhanced属性，启用WKWebView内核渲染（微信小程序基础库2.12.0+支持），可显著提升滑动流畅度：

    <scroll-view enhanced scroll-y></scroll-view>

  2. 优化长列表渲染
    若聊天记录为长列表，建议使用<list>组件替代scroll-view（需基础库2.21.0+），或通过use-virtual开启虚拟滚动：

    <scroll-view use-virtual></scroll-view>

  3. 减少节点复杂度
    检查每条聊天项的DOM结构，避免嵌套过深。建议：

    • 简化CSS样式（减少box-shadow、border-radius等耗性能样式）
    • 图片资源使用合适的尺寸（避免内存占用过大）
    • 文本内容过长的项添加show-menu-by-longpress

  4. 分页加载策略
    监听@scrolltolower事件实现分批加载，避免一次性渲染大量数据：

    onReachBottom() {
  // 追加分页数据
}

  5. 检查CSS属性
    确保未在scroll-view上设置height:100%，建议使用固定高度或flex布局。同时可尝试添加CSS属性：

    scroll-view {
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
}
回到顶部